{{ row.rank }}
- ![]()
+
{{ row.teamName }}
{{ row.gold }}
@@ -108,13 +95,6 @@ function setLogoVisible(event: Event, visible: boolean): void {
min-width: 0;
overflow: hidden;
}
-/* logo 尺寸用 em 跟着行字号走：既不会撑开行高，也不会挤动名次/奖牌列。 */
-.team-logo {
- flex: none;
- width: 1em;
- height: 1em;
- object-fit: contain;
-}
.team-name {
min-width: 0;
overflow: hidden;
diff --git a/web/src/display/guards.ts b/web/src/display/guards.ts
index e13cb5f..84b2142 100644
--- a/web/src/display/guards.ts
+++ b/web/src/display/guards.ts
@@ -178,6 +178,8 @@ export function parseAthleteStanding(source: unknown): AthleteStanding {
teamCode: str(rec.teamCode),
teamName: str(rec.teamName),
shortName: strOrNull(rec.shortName),
+ // 个人榜行显示运动员所属单位的 logo；旧服务端不下发时为 null，页面自动不留空洞。
+ logoPath: strOrNull(rec.logoPath),
totalPoints: num(rec.totalPoints),
gold: num(rec.gold),
silver: num(rec.silver),
@@ -198,6 +200,7 @@ export function parseEventResultRow(source: unknown): EventResultRow {
teamCode: str(rec.teamCode),
teamName: str(rec.teamName),
shortName: strOrNull(rec.shortName),
+ logoPath: strOrNull(rec.logoPath),
athleteId: numOrNull(rec.athleteId),
athleteName: strOrNull(rec.athleteName),
memberNames: strings(rec.memberNames),
@@ -229,12 +232,13 @@ function parseFlatResultRow(
const row = parseEventResultRow(rec)
const team = byTeam.get(row.teamId)
if (team === undefined) return row
- // 平铺行只带 teamId，单位名要从快照的 teams 里补，否则底栏只能显示空白。
+ // 平铺行只带 teamId，单位名与 logo 要从快照的 teams 里补，否则底栏只能显示空白。
return {
...row,
teamCode: row.teamCode === '' ? team.code : row.teamCode,
teamName: row.teamName === '' ? team.name : row.teamName,
shortName: row.shortName ?? team.shortName,
+ logoPath: row.logoPath ?? team.logoPath,
}
}
diff --git a/web/src/display/mock.ts b/web/src/display/mock.ts
index 3c5cab7..abb7ef5 100644
--- a/web/src/display/mock.ts
+++ b/web/src/display/mock.ts
@@ -135,6 +135,7 @@ function buildRows(seeds: readonly ResultSeed[], unit: string): EventResultRow[]
teamCode: team?.code ?? '',
teamName: team?.name ?? '',
shortName: team?.shortName ?? null,
+ logoPath: team?.logoPath ?? null,
athleteId: index + 1,
athleteName: seed.athlete,
memberNames: null,
@@ -236,6 +237,7 @@ function buildAthletes(): AthleteStanding[] {
teamCode: item?.code ?? '',
teamName: item?.name ?? '',
shortName: item?.shortName ?? null,
+ logoPath: item?.logoPath ?? null,
totalPoints,
gold,
silver,
diff --git a/web/src/display/tests/logo-path.test.ts b/web/src/display/tests/logo-path.test.ts
new file mode 100644
index 0000000..ea994de
--- /dev/null
+++ b/web/src/display/tests/logo-path.test.ts
@@ -0,0 +1,46 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { parseAthleteStanding, parseEventResultGroups, parseEventResultRow } from '../guards'
+import type { Team } from '@/shared'
+
+// 分项成绩行与个人榜行都要带单位 logo。契约要求缺字段时补 null 而不是 undefined：
+// 页面据此判断「不渲染
![]()
」，否则会留下一个空占位把名字推歪。
+
+test('parseEventResultRow 收下单位 logoPath，缺失或类型不对时补 null', () => {
+ assert.equal(
+ parseEventResultRow({ entryId: 1, teamId: 2, logoPath: '/uploads/t2.png' }).logoPath,
+ '/uploads/t2.png',
+ )
+ assert.equal(parseEventResultRow({ entryId: 1, teamId: 2 }).logoPath, null)
+ assert.equal(parseEventResultRow({ entryId: 1, teamId: 2, logoPath: 42 }).logoPath, null)
+})
+
+test('parseAthleteStanding 收下所属单位的 logoPath，缺失时补 null', () => {
+ const row = parseAthleteStanding({ athleteId: 7, teamId: 2, logoPath: '/uploads/t2.png' })
+ assert.equal(row.logoPath, '/uploads/t2.png')
+ assert.equal(parseAthleteStanding({ athleteId: 7, teamId: 2 }).logoPath, null)
+})
+
+// 平铺成绩行只带 teamId，单位表里有 logo 时要跟着补上，否则分项成绩页这一格会空着。
+test('平铺成绩行从单位表补 logoPath', () => {
+ const teams: Team[] = [
+ {
+ id: 2,
+ code: 'T02',
+ name: '第二分公司',
+ shortName: null,
+ logoPath: '/uploads/t2.png',
+ color: null,
+ sortOrder: 1,
+ active: true,
+ },
+ ]
+ const groups = parseEventResultGroups([{ eventId: 1, categoryId: 1, entryId: 5, teamId: 2 }], teams)
+ assert.equal(groups[0]?.rows[0]?.logoPath, '/uploads/t2.png')
+})
+
+// 单位表里那条没有 logo：补上去的必须是 null，页面才不会去请求一个不存在的图。
+test('平铺成绩行补不到 logo 时保持 null', () => {
+ const groups = parseEventResultGroups([{ eventId: 1, categoryId: 1, entryId: 5, teamId: 9 }], [])
+ assert.equal(groups[0]?.rows[0]?.logoPath, null)
+})
diff --git a/web/src/display/tests/team-logo.test.ts b/web/src/display/tests/team-logo.test.ts
new file mode 100644
index 0000000..0e121d8
--- /dev/null
+++ b/web/src/display/tests/team-logo.test.ts
@@ -0,0 +1,190 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { compileTemplate, parse } from 'vue/compiler-sfc'
+
+// 单位 logo 只有一份实现：4 个榜单页都走 TeamLogo.vue，页面里不再手写
![]()
。
+// 项目没有 jsdom，这里编译 SFC 模板取 AST，按元素与顺序断言，改坏排版会直接失败。
+
+const LOGO_SOURCE = readFileSync(new URL('../components/TeamLogo.vue', import.meta.url), 'utf8')
+
+/** 页面 → 放 logo 的那一列（分项成绩页的单位列用的是 .team）。 */
+const PAGES: readonly [string, string][] = [
+ ['StandingsPage.vue', 'name'],
+ ['TeamMedalsPage.vue', 'name'],
+ ['EventResultsPage.vue', 'team'],
+ ['AthleteStandingsPage.vue', 'name'],
+]
+
+// @vue/compiler-core 的 NodeTypes 没有从 compiler-sfc 再导出，按枚举值取用。
+const NODE_ELEMENT = 1
+const NODE_IF = 9
+const NODE_ATTRIBUTE = 6
+const NODE_DIRECTIVE = 7
+
+interface AstAttr {
+ type: number
+ name?: string
+ value?: { content?: string }
+ /** v-bind 的 :name="expr"：表达式在 exp.loc.source 上。 */
+ arg?: { content?: string }
+ exp?: { loc?: { source?: string } }
+}
+
+interface AstBranch {
+ condition?: { content?: string }
+ children: AstNode[]
+}
+
+interface AstNode {
+ type: number
+ tag?: string
+ props?: AstAttr[]
+ children?: AstNode[]
+ branches?: AstBranch[]
+}
+
+interface Container {
+ classes: string[]
+ logoPathExpr: string
+ children: AstNode[]
+}
+
+function classTokens(node: AstNode): string[] {
+ const attr = node.props?.find((prop) => prop.type === NODE_ATTRIBUTE && prop.name === 'class')
+ return attr?.value?.content?.split(/\s+/).filter(Boolean) ?? []
+}
+
+/** 直接子元素；v-if 分支展开一层，免得元素被条件包住时漏看。 */
+function childElements(node: AstNode): AstNode[] {
+ const out: AstNode[] = []
+ for (const child of node.children ?? []) {
+ if (child.type === NODE_IF) {
+ for (const branch of child.branches ?? []) out.push(...branch.children)
+ } else {
+ out.push(child)
+ }
+ }
+ return out
+}
+
+function collect(node: AstNode, out: AstNode[]): void {
+ out.push(node)
+ for (const child of node.children ?? []) collect(child, out)
+ for (const branch of node.branches ?? []) {
+ for (const child of branch.children) collect(child, out)
+ }
+}
+
+function templateAst(source: string, filename: string): AstNode {
+ const { descriptor, errors } = parse(source, { filename })
+ assert.equal(errors.length, 0, `${filename} 应能被解析`)
+ const template = descriptor.template
+ if (template == null) throw new Error(`${filename} 缺少
`)
+ const built = compileTemplate({ source: template.content, filename, id: filename })
+ assert.deepEqual(built.errors, [], `${filename} 模板应能编译`)
+ if (built.ast === undefined) throw new Error(`${filename} 模板未产出 AST`)
+ return built.ast as unknown as AstNode
+}
+
+/** setup 里的绑定在模板 AST 里被改写成 _ctx.xxx，比较表达式时统一去掉前缀。 */
+function stripContext(expr: string): string {
+ return expr.replace(/^_ctx\./, '')
+}
+
+/** 取元素上 `:name="expr"` 绑定的表达式源码；静态写法（不带冒号）返回空串。 */
+function boundExpression(node: AstNode, name: string): string {
+ const prop = node.props?.find(
+ (item) => item.type === NODE_DIRECTIVE && item.arg?.content === name,
+ )
+ return stripContext(prop?.exp?.loc?.source ?? '')
+}
+
+/** 找出直接渲染 的父元素，并带上它的 :path 表达式。 */
+function logoContainers(ast: AstNode): Container[] {
+ const nodes: AstNode[] = []
+ collect(ast, nodes)
+ const out: Container[] = []
+ for (const node of nodes) {
+ if (node.type !== NODE_ELEMENT) continue
+ const children = childElements(node)
+ if (!children.some((child) => child.tag === 'TeamLogo')) continue
+ const logo = children.find((child) => child.tag === 'TeamLogo')
+ out.push({
+ classes: classTokens(node),
+ logoPathExpr: logo === undefined ? '' : boundExpression(logo, 'path'),
+ children,
+ })
+ }
+ return out
+}
+
+function styleRule(style: string, selector: string): string {
+ const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+ const match = new RegExp(`${escaped}\\s*\\{([^}]*)\\}`).exec(style)
+ assert.ok(match !== null, `样式里应存在 ${selector} 规则`)
+ return match[1] ?? ''
+}
+
+test('TeamLogo 没有 path 时不渲染 img，有 path 时才出图', () => {
+ const nodes: AstNode[] = []
+ collect(templateAst(LOGO_SOURCE, 'TeamLogo.vue'), nodes)
+ assert.equal(nodes.filter((node) => node.tag === 'img').length, 1, 'TeamLogo 应只渲染一个 ![]()
')
+
+ // 条件挂在 v-if="path" 上：调用方不用自己判断，留不下占位空洞。
+ const ifNode = nodes.find(
+ (node) => node.type === NODE_IF && node.branches?.[0]?.children[0]?.tag === 'img',
+ )
+ assert.ok(ifNode !== undefined, '![]()
应是 v-if 分支的根')
+ assert.equal(
+ stripContext(ifNode.branches?.[0]?.condition?.content ?? ''),
+ 'path',
+ '![]()
应由 path 控制渲染',
+ )
+})
+
+test('TeamLogo 用 em 定尺寸、object-fit: contain，不撑行高', () => {
+ const { descriptor } = parse(LOGO_SOURCE, { filename: 'TeamLogo.vue' })
+ const style = descriptor.styles[0]?.content ?? ''
+ const rule = styleRule(style, '.team-logo')
+ assert.match(rule, /width:\s*1em/)
+ assert.match(rule, /height:\s*1em/)
+ assert.match(rule, /object-fit:\s*contain/)
+ assert.match(rule, /flex:\s*none/, 'logo 不得被 flex 压缩变形')
+})
+
+for (const [page, column] of PAGES) {
+ test(`${page} 用 TeamLogo 在 ${column} 列的名字前渲染单位 logo`, () => {
+ const source = readFileSync(new URL(`../components/pages/${page}`, import.meta.url), 'utf8')
+ const ast = templateAst(source, page)
+
+ const containers = logoContainers(ast)
+ assert.equal(containers.length, 1, '同一页只应有一处渲染 logo')
+ const container = containers[0]
+ assert.ok(container !== undefined)
+ assert.ok(
+ container.classes.includes(column),
+ `logo 应放在 .${column} 列里，实际是 .${container.classes.join('.')}`,
+ )
+ assert.equal(container.logoPathExpr, 'row.logoPath', 'logo 应取行数据的 logoPath')
+
+ // 用户要求：logo 在名字前面。名字是容器里紧跟 logo 的那个元素。
+ assert.equal(container.children[0]?.tag, 'TeamLogo', 'logo 应是这一列的首个子元素')
+ assert.equal(container.children.length, 2, '这一列只应有 logo + 名字两个子元素')
+ assert.equal(container.children[1]?.tag, 'span')
+ })
+}
+
+test('四个页面都不再手写 logo 的 ![]()
，逻辑只留一份', () => {
+ for (const [page] of PAGES) {
+ const source = readFileSync(new URL(`../components/pages/${page}`, import.meta.url), 'utf8')
+ const nodes: AstNode[] = []
+ collect(templateAst(source, page), nodes)
+ assert.equal(
+ nodes.filter((node) => node.tag === 'img').length,
+ 0,
+ `${page} 里不应再出现手写的 ![]()
`,
+ )
+ assert.match(source, /from '\.\.\/TeamLogo\.vue'/, `${page} 应引入 TeamLogo`)
+ }
+})
diff --git a/web/src/shared/types.ts b/web/src/shared/types.ts
index 2d83253..aacf032 100644
--- a/web/src/shared/types.ts
+++ b/web/src/shared/types.ts
@@ -298,6 +298,8 @@ export interface AthleteStanding {
teamCode: string
teamName: string
shortName: string | null
+ /** 运动员所属单位的 logo；无 logo 时为 null。 */
+ logoPath: string | null
totalPoints: number
gold: number
silver: number
@@ -663,6 +665,8 @@ export interface EventResultRow {
teamCode: string
teamName: string
shortName: string | null
+ /** 该行单位的 logo；无 logo 时为 null。 */
+ logoPath: string | null
athleteId: number | null
athleteName: string | null
memberNames: string[] | null