fix(workbench): stretch profile tag card

This commit is contained in:
caoxiaozhu
2026-06-03 15:53:30 +08:00
parent 34457f9c3e
commit 8887cf5a27
2 changed files with 22 additions and 5 deletions

View File

@@ -136,18 +136,19 @@ watch([() => props.visible, tagIdentity], ([visible]) => {
<style scoped>
.profile-tag-pager {
height: 100%;
min-height: 308px;
display: grid;
grid-template-rows: 272px 26px;
grid-template-rows: minmax(0, 1fr) 26px;
gap: 10px;
}
.profile-tag-list {
display: grid;
grid-template-rows: repeat(5, 48px);
align-content: start;
grid-template-rows: repeat(5, minmax(48px, 1fr));
align-content: stretch;
gap: 8px;
min-height: 272px;
min-height: 0;
animation: profileTagPageIn 180ms cubic-bezier(0.2, 0, 0, 1) both;
}
@@ -159,7 +160,7 @@ watch([() => props.visible, tagIdentity], ([visible]) => {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 48px;
min-height: 0;
padding: 7px 10px;
border: 1px solid rgba(var(--tag-accent-rgb), 0.2);
border-left: 3px solid rgb(var(--tag-accent-rgb));

View File

@@ -0,0 +1,16 @@
import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import test from 'node:test'
import { fileURLToPath } from 'node:url'
const pager = readFileSync(
fileURLToPath(new URL('../src/components/business/ExpenseProfileTagPager.vue', import.meta.url)),
'utf8'
)
test('profile tag pager stretches tag rows to the bottom of the card', () => {
assert.match(pager, /\.profile-tag-pager\s*\{[\s\S]*height:\s*100%;/)
assert.match(pager, /\.profile-tag-pager\s*\{[\s\S]*grid-template-rows:\s*minmax\(0,\s*1fr\) 26px;/)
assert.match(pager, /\.profile-tag-list\s*\{[\s\S]*grid-template-rows:\s*repeat\(5,\s*minmax\(48px,\s*1fr\)\);/)
assert.match(pager, /\.profile-tag-list\s*\{[\s\S]*align-content:\s*stretch;/)
})