- {/* Two-column layout */}
-
- {/* Left sidebar */}
-
-
- {/* Right content - overview cards */}
-
-
- {OVERVIEW_CARDS.filter((card) => card.key !== 'security' || user?.canChangePassword === true).map((card) => {
- const Icon = card.icon
- return (
-
-
-
-
-
-
-
- {t(card.label)}
-
-
-
-
- {t(card.desc)}
-
-
-
- )
- })}
-
-
+
+ {OVERVIEW_CARDS.filter((card) => card.key !== 'security' || user?.canChangePassword === true).map((card) => {
+ const Icon = card.icon
+ return (
+
+
+
+
+
+
+
+ {t(card.label)}
+
+
+
+
+ {t(card.desc)}
+
+
+
+ )
+ })}
)
diff --git a/web/src/pages/dashboard/my-skills-interactions.test.tsx b/web/src/pages/dashboard/my-skills-interactions.test.tsx
index 00219a540..1f480fa72 100644
--- a/web/src/pages/dashboard/my-skills-interactions.test.tsx
+++ b/web/src/pages/dashboard/my-skills-interactions.test.tsx
@@ -15,11 +15,11 @@ let showEmpty = false
let superAdmin = false
let search: { filter?: string; q?: string; namespace?: string; page?: number } = {}
-function makeSkill() {
+function makeSkill(managementState: { ownerReadOnly: boolean; promotionRole?: string; requestedVisibility?: string } = { ownerReadOnly: false }) {
return {
id: 1, namespace: 'team', slug: 'demo', displayName: 'Demo', summary: 'Summary',
status: 'ACTIVE', visibility: 'PRIVATE', downloadCount: 3, canSubmitPromotion: false,
- managementState: { ownerReadOnly: false },
+ managementState,
publishedVersion: { id: 11, version: '1.1.0', status: 'PUBLISHED' },
}
}
@@ -86,6 +86,28 @@ afterEach(() => { cleanup(); vi.restoreAllMocks(); vi.unstubAllGlobals() })
afterAll(() => vi.unstubAllEnvs())
describe('My Skills interactions with real menu and dialog', () => {
+ it('preserves long descriptions in the card and full-text title without slicing the source text', () => {
+ const summary = '用于汇总跨服务任务的输入、执行条件和人工复核结果。'.repeat(20) + 'UnbrokenIdentifier'.repeat(15)
+ skill.summary = summary
+ render(
)
+ const description = screen.getByText(summary)
+ expect(description.getAttribute('title')).toBe(summary)
+ expect(screen.getByRole('link', { name: 'Demo' })).toBeTruthy()
+ })
+
+ it('keeps ownership, promotion and requested visibility explanations in one supplemental group', () => {
+ skill = makeSkill({ ownerReadOnly: true, promotionRole: 'GLOBAL_COPY', requestedVisibility: 'PUBLIC' })
+ render(
)
+ const readonly = screen.getByText('mySkills.ownerReadOnly')
+ const promotion = screen.getByText('mySkills.promotionRoles.GLOBAL_COPY')
+ const visibility = screen.getByText('skillVisibility.pendingList')
+ expect(readonly.parentElement).toBe(promotion.parentElement)
+ expect(readonly.parentElement).toBe(visibility.parentElement)
+ expect(readonly.getAttribute('role')).toBe('status')
+ expect(visibility.getAttribute('role')).toBe('status')
+ expect(screen.queryByRole('button', { name: 'mySkills.update' })).toBeNull()
+ })
+
it('loads comparison on demand and returns focus after Escape without navigating', async () => {
render(
)
expect(useVersions).not.toHaveBeenCalled()
diff --git a/web/src/pages/dashboard/my-skills.module.css b/web/src/pages/dashboard/my-skills.module.css
index 57abee783..f977269e5 100644
--- a/web/src/pages/dashboard/my-skills.module.css
+++ b/web/src/pages/dashboard/my-skills.module.css
@@ -74,9 +74,19 @@
.page .description {
font-size: 12px;
line-height: 20px;
+ min-height: 40px;
color: #666670;
}
+.page .supplementalArea { display: flex; flex-direction: column; gap: 8px; }
+.page .supplementalArea:empty { display: none; }
+.page .supplementalNotes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
+.page .supplementalNotes .note { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+
+@media (min-width: 768px) {
+ .page .supplementalArea.reserveSupplemental { display: flex; min-height: 20px; }
+}
+
.page .metadata {
gap: 8px 17px;
font-size: 11px;
diff --git a/web/src/pages/dashboard/my-skills.tsx b/web/src/pages/dashboard/my-skills.tsx
index 7b2c71f11..19530e868 100644
--- a/web/src/pages/dashboard/my-skills.tsx
+++ b/web/src/pages/dashboard/my-skills.tsx
@@ -104,6 +104,8 @@ export function MySkillsPage() {
const { data: namespaceOptions } = useMyNamespaces()
const skills = skillPage?.items ?? []
+ const hasSupplementalRows = skills.some(skill => skill.managementState?.ownerReadOnly
+ || skill.managementState?.promotionRole || skill.managementState?.requestedVisibility)
const totalPages = skillPage ? Math.max(Math.ceil(skillPage.total / skillPage.size), 1) : 1
const availableFilters = getMySkillFilters(hasRole('SUPER_ADMIN'))
const canRestoreHidden = filter === 'HIDDEN' && hasRole('SUPER_ADMIN')
@@ -458,7 +460,7 @@ export function MySkillsPage() {
className={`${styles.skillCard} relative border-border/70 hover:shadow-none ${hidden ? '' : 'cursor-pointer hover:border-border'}`}
onClick={hidden ? undefined : openDetail}>
-
+
@@ -532,7 +534,8 @@ export function MySkillsPage() {
- {summary &&
{summary}
}
+
{summary}
{coordinate}
@@ -545,12 +548,16 @@ export function MySkillsPage() {
: headlineVersion ? v{headlineVersion.version} : null}
{formatCompactCount(skill.downloadCount)}
- {ownerReadOnly &&
{t('mySkills.ownerReadOnly')}
}
- {skill.managementState?.promotionRole &&
{t(`mySkills.promotionRoles.${skill.managementState.promotionRole}`)}
}
- {skill.status === 'ACTIVE' && !hidden &&
}
- {skill.managementState?.requestedVisibility &&
- {t('skillVisibility.pendingList', { visibility: t(`skillVisibility.${skill.managementState.requestedVisibility}`) })}
-
}
+
+ {(ownerReadOnly || skill.managementState?.promotionRole || skill.managementState?.requestedVisibility) &&
+ {ownerReadOnly &&
{t('mySkills.ownerReadOnly')}
}
+ {skill.managementState?.promotionRole &&
{t(`mySkills.promotionRoles.${skill.managementState.promotionRole}`)}
}
+ {skill.managementState?.requestedVisibility &&
+ {t('skillVisibility.pendingList', { visibility: t(`skillVisibility.${skill.managementState.requestedVisibility}`) })}
+
}
+
}
+ {skill.status === 'ACTIVE' && !hidden &&
}
+
diff --git a/web/src/pages/settings/accounts.tsx b/web/src/pages/settings/accounts.tsx
index 8d14beb4b..6830377f8 100644
--- a/web/src/pages/settings/accounts.tsx
+++ b/web/src/pages/settings/accounts.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useCancelAccountMerge, useConfirmAccountMerge, useInitiateAccountMerge, useInspectAccountMerge, useVerifyAccountMerge } from '@/features/auth/use-account-merge'
import { truncateErrorMessage } from '@/shared/lib/error-display'
+import { DashboardPageHeader } from '@/shared/components/dashboard-page-header'
import { Button } from '@/shared/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/ui/card'
import { Input } from '@/shared/ui/input'
@@ -106,7 +107,8 @@ export function AccountSettingsPage() {
}
return (
-
+
+
{t('accounts.initiateTitle')}
diff --git a/web/src/shared/components/dashboard-page-header.tsx b/web/src/shared/components/dashboard-page-header.tsx
index 93646e42a..3a05af3de 100644
--- a/web/src/shared/components/dashboard-page-header.tsx
+++ b/web/src/shared/components/dashboard-page-header.tsx
@@ -13,10 +13,10 @@ interface DashboardPageHeaderProps {
export function DashboardPageHeader({ title, subtitle, actions }: DashboardPageHeaderProps) {
return (
-
-
-
{title}
- {subtitle ?
{subtitle}
: null}
+
+
+
{title}
+ {subtitle ?
{subtitle}
: null}
{actions}