收口反馈页输入字段
将反馈页问题描述迁移到 PlatformTextField 将反馈页联系电话迁移到 PlatformTextField 将反馈页字段标题迁移到 PlatformFieldLabel 补充反馈页公共输入字段断言 更新 PlatformUiKit 文档和 Hermes 决策记录
This commit is contained in:
@@ -72,6 +72,7 @@
|
||||
- 2026-06-10 追加：认证入口的短信 / 密码登录、重置密码、绑定手机号、邀请码和账号安全表单字段使用 `PlatformTextField surface="platform"` 与 `PlatformFieldLabel variant="form"`；认证业务组件只保留受控值、登录 / 绑定流程、原生 input 属性和校验提示，字段可访问名称继续由外层原生 `label` 承接，不再手写 `platform-input` 或表单标题 class。
|
||||
- 2026-06-10 追加：个人中心兑换码和邀请兑换输入使用 `PlatformTextField surface="platform"`；业务组件只保留兑换 / 邀请码提交、归一化、大写展示、Enter 提交和原生可访问名称，不再手写 `platform-profile-input` 或白底 input chrome。
|
||||
- 2026-06-10 追加：个人中心昵称弹窗输入框使用 `PlatformTextField surface="editorDark" size="lg" density="roomy"`；业务组件保留原生 `label` / sr-only “新昵称”、`autoFocus`、`maxLength`、Enter 提交、昵称校验和保存流程，不再手写暗色 input chrome。
|
||||
- 2026-06-10 追加：平台反馈页问题描述和联系电话字段使用 `PlatformTextField surface="platform"`，标题使用 `PlatformFieldLabel variant="form"`；反馈页保留外层原生 label、受控值、长度限制、透明嵌入式局部 class 和提交校验，不再手写 textarea / input / 字段标题 chrome。验证命令：`npm run test -- src/components/platform-entry/PlatformFeedbackView.test.tsx src/components/common/PlatformTextField.test.tsx src/components/common/PlatformFieldLabel.test.tsx`。
|
||||
- 2026-06-09 追加：平台字段标签统一使用 `src/components/common/PlatformFieldLabel.tsx` 承载 `field`、`section`、`form`、`pill` 与 `accentPill` 五类字段标题视觉；视觉小说结果页、汪汪声浪轻配置编辑器和宝贝识物工作台已先迁移，业务页只保留字段文案和必要局部布局 class，不再重复拼普通字段名、分区标题、表单标题、普通胶囊和强调胶囊 class。
|
||||
- 2026-06-10 追加：通用创作图片输入面板的主图标题和提示词标题使用 `PlatformFieldLabel variant="form"`；提示词字段保留外层原生 `label htmlFor`，业务组件只保留字段文案、布局和上传 / 生成交互，不再手写 `mb-2 block text-sm font-black` 标题 class。
|
||||
- 2026-06-10 追加：个人中心存档 / 玩过弹窗里的简单空态使用 `PlatformEmptyState surface="subpanel" size="inline"`，玩过弹窗的“可继续 / 玩过”分区标题使用 `PlatformFieldLabel variant="section"`，已玩作品白底按钮卡使用 `PlatformSubpanel as="button" surface="flat" radius="sm" padding="md" interactive`；`SaveArchiveCard` 因含图片遮罩和加载态暂不并入本轮。
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -25,11 +25,25 @@ test('PlatformFeedbackView renders reference feedback fields', () => {
|
||||
|
||||
expect(screen.getByText('帮助与反馈')).toBeTruthy();
|
||||
expect(screen.getByText('反馈问题')).toBeTruthy();
|
||||
expect(screen.getByLabelText('问题描述')).toBeTruthy();
|
||||
const descriptionField = screen.getByLabelText('问题描述');
|
||||
expect(descriptionField).toBeTruthy();
|
||||
expect(descriptionField.tagName).toBe('TEXTAREA');
|
||||
expect(descriptionField.className).toContain('platform-text-field');
|
||||
expect(descriptionField.className).toContain('!bg-transparent');
|
||||
expect(screen.getByText('问题描述').className).toContain(
|
||||
'text-[var(--platform-text-strong)]',
|
||||
);
|
||||
expect(screen.getByText('0/200')).toBeTruthy();
|
||||
expect(screen.getByText('上传凭证(提供问题截图)')).toBeTruthy();
|
||||
expect(screen.getByText('上传凭证')).toBeTruthy();
|
||||
expect(screen.getByLabelText('联系电话')).toBeTruthy();
|
||||
const contactPhoneField = screen.getByLabelText('联系电话');
|
||||
expect(contactPhoneField).toBeTruthy();
|
||||
expect(contactPhoneField.tagName).toBe('INPUT');
|
||||
expect(contactPhoneField.className).toContain('platform-text-field');
|
||||
expect(contactPhoneField.className).toContain('!bg-transparent');
|
||||
expect(screen.getByText('联系电话').className).toContain(
|
||||
'text-[var(--platform-text-strong)]',
|
||||
);
|
||||
expect(screen.getByRole('button', { name: '提交' })).toBeTruthy();
|
||||
const feedbackHistoryButton = screen.getByRole('button', {
|
||||
name: '查看反馈与投诉记录',
|
||||
|
||||
@@ -3,8 +3,10 @@ import { useRef, useState } from 'react';
|
||||
|
||||
import type { ProfileFeedbackEvidenceItemInput } from '../../../packages/shared/src/contracts/runtime';
|
||||
import { PlatformActionButton } from '../common/PlatformActionButton';
|
||||
import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
|
||||
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
|
||||
import { PlatformSubpanel } from '../common/PlatformSubpanel';
|
||||
import { PlatformTextField } from '../common/PlatformTextField';
|
||||
import { PlatformUploadPreviewCard } from '../common/PlatformUploadPreviewCard';
|
||||
import { PlatformUploadTile } from '../common/PlatformUploadTile';
|
||||
|
||||
@@ -243,17 +245,25 @@ export function PlatformFeedbackView({
|
||||
<PlatformSubpanel radius="md">
|
||||
<label
|
||||
htmlFor="profile-feedback-description"
|
||||
className="block text-base font-semibold text-[var(--platform-text-strong)]"
|
||||
className="block"
|
||||
>
|
||||
问题描述
|
||||
<PlatformFieldLabel
|
||||
variant="form"
|
||||
className="mb-0 text-base font-semibold"
|
||||
>
|
||||
问题描述
|
||||
</PlatformFieldLabel>
|
||||
</label>
|
||||
<textarea
|
||||
<PlatformTextField
|
||||
variant="textarea"
|
||||
id="profile-feedback-description"
|
||||
value={description}
|
||||
maxLength={MAX_FEEDBACK_DESCRIPTION_LENGTH}
|
||||
onChange={(event) => updateDescription(event.target.value)}
|
||||
placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助，温馨提醒您请勿填写身份证号等个人隐私信息。"
|
||||
className="mt-3 min-h-[10.5rem] w-full resize-none border-0 bg-transparent text-sm leading-6 text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
|
||||
density="roomy"
|
||||
size="md"
|
||||
className="mt-3 min-h-[10.5rem] !rounded-none !border-0 !bg-transparent !px-0 !py-0 text-[var(--platform-text-strong)] placeholder:text-[var(--platform-text-soft)] focus:!bg-transparent focus:!ring-0"
|
||||
/>
|
||||
<div className="text-right text-xs text-[var(--platform-text-soft)]">
|
||||
{descriptionLength}/{MAX_FEEDBACK_DESCRIPTION_LENGTH}
|
||||
@@ -295,18 +305,25 @@ export function PlatformFeedbackView({
|
||||
<PlatformSubpanel radius="md">
|
||||
<label
|
||||
htmlFor="profile-feedback-phone"
|
||||
className="block text-base font-semibold text-[var(--platform-text-strong)]"
|
||||
className="block"
|
||||
>
|
||||
联系电话
|
||||
<PlatformFieldLabel
|
||||
variant="form"
|
||||
className="mb-0 text-base font-semibold"
|
||||
>
|
||||
联系电话
|
||||
</PlatformFieldLabel>
|
||||
</label>
|
||||
<input
|
||||
<PlatformTextField
|
||||
id="profile-feedback-phone"
|
||||
type="tel"
|
||||
value={contactPhone}
|
||||
maxLength={MAX_CONTACT_PHONE_LENGTH}
|
||||
onChange={(event) => updateContactPhone(event.target.value)}
|
||||
placeholder="选填，如您填写则将会同步开发者与您联系"
|
||||
className="mt-3 w-full border-0 bg-transparent text-sm leading-6 text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
|
||||
size="md"
|
||||
density="compact"
|
||||
className="mt-3 !rounded-none !border-0 !bg-transparent !px-0 !py-0 text-[var(--platform-text-strong)] placeholder:text-[var(--platform-text-soft)] focus:!bg-transparent focus:!ring-0"
|
||||
/>
|
||||
</PlatformSubpanel>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user