601 lines
16 KiB
Vue
601 lines
16 KiB
Vue
<template>
|
|
<section
|
|
v-if="rows.length > 0"
|
|
class="damage-panel"
|
|
:class="{ 'is-expanded': expanded }"
|
|
aria-label="技能伤害详情"
|
|
>
|
|
<div class="damage-panel__surface">
|
|
<button
|
|
type="button"
|
|
class="damage-panel__toggle"
|
|
:aria-expanded="expanded"
|
|
:aria-label="expanded ? '收起完整伤害详情' : '展开完整伤害详情'"
|
|
:title="expanded ? '收起完整伤害详情' : '展开完整伤害详情'"
|
|
@click="expanded = !expanded"
|
|
>
|
|
<svg viewBox="0 0 16 28" aria-hidden="true">
|
|
<path :d="expanded ? 'M5 3l7 11-7 11' : 'M11 3L4 14l7 11'" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="damage-panel__header damage-panel__grid">
|
|
<button
|
|
type="button"
|
|
class="damage-panel__heading damage-panel__skill-heading"
|
|
@click="sortValue('learnLv')"
|
|
>
|
|
技能
|
|
<span
|
|
v-if="sort === 'learnLv'"
|
|
class="damage-panel__sort-indicator"
|
|
:class="{ 'is-ascending': order === 'asc' }"
|
|
aria-hidden="true"
|
|
></span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="damage-panel__heading damage-panel__full-column"
|
|
@click="sortValue('cd')"
|
|
>
|
|
CD
|
|
<span
|
|
v-if="sort === 'cd'"
|
|
class="damage-panel__sort-indicator"
|
|
:class="{ 'is-ascending': order === 'asc' }"
|
|
aria-hidden="true"
|
|
></span>
|
|
</button>
|
|
<div class="damage-panel__heading">次数</div>
|
|
<button
|
|
type="button"
|
|
class="damage-panel__heading damage-panel__full-column"
|
|
@click="sortValue('dps')"
|
|
>
|
|
秒伤
|
|
<span
|
|
v-if="sort === 'dps'"
|
|
class="damage-panel__sort-indicator"
|
|
:class="{ 'is-ascending': order === 'asc' }"
|
|
aria-hidden="true"
|
|
></span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="damage-panel__heading damage-panel__full-column"
|
|
@click="sortValue('total')"
|
|
>
|
|
总伤害
|
|
<span
|
|
v-if="sort === 'total'"
|
|
class="damage-panel__sort-indicator"
|
|
:class="{ 'is-ascending': order === 'asc' }"
|
|
aria-hidden="true"
|
|
></span>
|
|
</button>
|
|
<div class="damage-panel__heading">占比</div>
|
|
</div>
|
|
|
|
<div class="damage-panel__body">
|
|
<div v-for="row in rows" :key="row.key" class="damage-panel__row damage-panel__grid">
|
|
<div class="damage-panel__skill-cell">
|
|
<span class="damage-panel__icon-wrap">
|
|
<img :src="getImageURL(row.skill.icon)" :alt="row.skill.name" />
|
|
<span
|
|
v-if="row.skill.lv"
|
|
class="damage-panel__level"
|
|
:data-text="`Lv${row.skill.lv}`"
|
|
>
|
|
Lv{{ row.skill.lv }}
|
|
</span>
|
|
</span>
|
|
<span class="damage-panel__skill-name" :title="row.displayName">
|
|
{{ row.displayName }}
|
|
</span>
|
|
</div>
|
|
<div class="damage-panel__cell damage-panel__full-column">{{ row.cd }}</div>
|
|
<div class="damage-panel__cell damage-panel__count-cell">
|
|
<UiNumberField
|
|
:model-value="row.count"
|
|
:min="0"
|
|
:step="1"
|
|
:show-fast-step="false"
|
|
class="damage-panel__count-field"
|
|
@update:model-value="setSkillCount(row.skill, $event)"
|
|
/>
|
|
</div>
|
|
<div class="damage-panel__cell damage-panel__full-column" :class="toneClass(row.dpsTone)">
|
|
{{ row.dps }}
|
|
</div>
|
|
<div
|
|
class="damage-panel__cell damage-panel__full-column"
|
|
:class="toneClass(row.totalTone)"
|
|
>
|
|
{{ row.total }}
|
|
</div>
|
|
<div class="damage-panel__cell damage-panel__share">{{ row.share }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="damage-panel__total" :class="toneClass(totalTone)">
|
|
<span>{{ totalStandard ? '相对基准' : '总伤害' }}</span>
|
|
<strong>{{ showTotalText }}</strong>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="Skill">
|
|
import type { IResultSkill, IResultSkillCount } from '@/api/calc/type'
|
|
import { UiNumberField } from '@/components/ui/number-field'
|
|
import { useConfigStore } from '@/stores'
|
|
import { getImageURL } from '@/utils/images'
|
|
|
|
type SortKey = 'learnLv' | 'cd' | 'dps' | 'total'
|
|
type Tone = 'positive' | 'negative' | undefined
|
|
|
|
const props = defineProps<{
|
|
data: IResultSkill[]
|
|
standard?: {
|
|
skills: IResultSkill[]
|
|
skillCount: IResultSkillCount[]
|
|
}
|
|
}>()
|
|
|
|
const expanded = ref(false)
|
|
const sort = ref<SortKey>('learnLv')
|
|
const order = ref<'asc' | 'desc'>('desc')
|
|
const config = useConfigStore()
|
|
|
|
watchEffect(() => {
|
|
props.data.forEach((skill) => {
|
|
const exists = config.skillCountConfig.some(
|
|
(item) => item.name === skill.name && item.mode === skill.mode,
|
|
)
|
|
if (!exists) config.skillCountConfig.push({ name: skill.name, mode: skill.mode, count: 1 })
|
|
})
|
|
})
|
|
|
|
function skillCountValue(skill: IResultSkill) {
|
|
return (
|
|
config.skillCountConfig.find((item) => item.name === skill.name && item.mode === skill.mode)
|
|
?.count ?? 1
|
|
)
|
|
}
|
|
|
|
function setSkillCount(skill: IResultSkill, value: number | undefined) {
|
|
const count = typeof value === 'number' && Number.isFinite(value) ? value : 0
|
|
const target = config.skillCountConfig.find(
|
|
(item) => item.name === skill.name && item.mode === skill.mode,
|
|
)
|
|
if (target) target.count = count
|
|
else config.skillCountConfig.push({ name: skill.name, mode: skill.mode, count })
|
|
}
|
|
|
|
const totalDamage = computed(() =>
|
|
props.data.reduce((sum, skill) => sum + skill.damage * skillCountValue(skill), 0),
|
|
)
|
|
|
|
const totalStandard = computed(() => {
|
|
if (!props.standard) return undefined
|
|
return props.standard.skills.reduce((sum, skill) => {
|
|
const count = props.standard?.skillCount.find(
|
|
(item) => item.name === skill.name && item.mode === skill.mode,
|
|
)?.count
|
|
return sum + skill.damage * (count ?? 0)
|
|
}, 0)
|
|
})
|
|
|
|
function standardValues(skill: IResultSkill) {
|
|
const standardSkill = props.standard?.skills.find(
|
|
(item) => item.name === skill.name && item.mode === skill.mode,
|
|
)
|
|
const standardCount = props.standard?.skillCount.find(
|
|
(item) => item.name === skill.name && item.mode === skill.mode,
|
|
)?.count
|
|
if (!standardSkill || standardSkill.damage <= 0 || standardSkill.cd <= 0 || !standardCount) {
|
|
return undefined
|
|
}
|
|
return { skill: standardSkill, count: standardCount }
|
|
}
|
|
|
|
function comparisonTone(value: number): Tone {
|
|
return value >= 0 ? 'positive' : 'negative'
|
|
}
|
|
|
|
function formatPercent(value: number) {
|
|
return `${(value * 100).toFixed(2)}%`
|
|
}
|
|
|
|
function sortMetric(skill: IResultSkill, key: SortKey) {
|
|
if (key === 'total') return skill.damage * skillCountValue(skill)
|
|
if (key === 'dps') return skill.cd > 0 ? skill.damage / skill.cd : 0
|
|
return Number(skill[key] ?? 0)
|
|
}
|
|
|
|
const sortedSkills = computed(() =>
|
|
[...props.data].sort((left, right) => {
|
|
const leftValue = sortMetric(left, sort.value)
|
|
const rightValue = sortMetric(right, sort.value)
|
|
return order.value === 'asc' ? leftValue - rightValue : rightValue - leftValue
|
|
}),
|
|
)
|
|
|
|
const rows = computed(() =>
|
|
sortedSkills.value.map((skill) => {
|
|
const count = skillCountValue(skill)
|
|
const currentTotal = skill.damage * count
|
|
const currentDps = skill.cd > 0 ? skill.damage / skill.cd : 0
|
|
const standard = standardValues(skill)
|
|
let dps = Math.round(currentDps).toLocaleString()
|
|
let total = Math.round(currentTotal).toLocaleString()
|
|
let dpsTone: Tone
|
|
let totalTone: Tone
|
|
|
|
if (standard) {
|
|
const standardDps = standard.skill.damage / standard.skill.cd
|
|
const standardTotal = standard.skill.damage * standard.count
|
|
const dpsDelta = standardDps === 0 ? 0 : (currentDps - standardDps) / standardDps
|
|
const totalDelta = standardTotal === 0 ? 0 : (currentTotal - standardTotal) / standardTotal
|
|
dps = formatPercent(dpsDelta)
|
|
total = formatPercent(totalDelta)
|
|
dpsTone = comparisonTone(dpsDelta)
|
|
totalTone = comparisonTone(totalDelta)
|
|
}
|
|
|
|
const share = totalDamage.value === 0 ? 0 : currentTotal / totalDamage.value
|
|
return {
|
|
key: `${skill.name}-${skill.mode ?? ''}`,
|
|
skill,
|
|
displayName: `${skill.name}${skill.mode ? ` [${skill.mode}]` : ''}`,
|
|
count,
|
|
cd: `${skill.cd.toFixed(1)}s`,
|
|
dps,
|
|
total,
|
|
dpsTone,
|
|
totalTone,
|
|
share: formatPercent(share),
|
|
}
|
|
}),
|
|
)
|
|
|
|
const showTotal = computed(() => {
|
|
if (!totalStandard.value) return totalDamage.value
|
|
return ((totalDamage.value - totalStandard.value) / totalStandard.value) * 100
|
|
})
|
|
|
|
const showTotalText = computed(() =>
|
|
totalStandard.value
|
|
? `${showTotal.value.toFixed(2)}%`
|
|
: Math.round(showTotal.value).toLocaleString(),
|
|
)
|
|
|
|
const totalTone = computed<Tone>(() =>
|
|
totalStandard.value ? comparisonTone(showTotal.value) : undefined,
|
|
)
|
|
|
|
function toneClass(tone: Tone) {
|
|
return {
|
|
'is-positive': tone === 'positive',
|
|
'is-negative': tone === 'negative',
|
|
}
|
|
}
|
|
|
|
function sortValue(key: SortKey) {
|
|
if (sort.value === key) order.value = order.value === 'asc' ? 'desc' : 'asc'
|
|
else {
|
|
sort.value = key
|
|
order.value = 'desc'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.damage-panel {
|
|
position: relative;
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.damage-panel__surface {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 100%;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
padding: var(--ui-character-result-panel-padding);
|
|
border: var(--ui-component-stroke-size) solid var(--ui-result-panel-border);
|
|
background: var(--ui-result-panel-background);
|
|
box-shadow: var(--ui-result-panel-shadow);
|
|
}
|
|
|
|
.damage-panel__toggle {
|
|
position: absolute;
|
|
z-index: 4;
|
|
top: 50%;
|
|
left: calc(var(--ui-character-result-toggle-inline-size) * -1);
|
|
display: inline-flex;
|
|
width: var(--ui-character-result-toggle-inline-size);
|
|
height: var(--ui-character-result-toggle-block-size);
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: var(--ui-component-stroke-size) solid var(--ui-result-toggle-border);
|
|
border-right: 0;
|
|
background: var(--ui-result-toggle-background);
|
|
box-shadow: var(--ui-result-toggle-shadow);
|
|
color: var(--ui-result-toggle-foreground);
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
width: 12px;
|
|
height: 24px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: square;
|
|
stroke-linejoin: miter;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--ui-focus-outline-size) solid var(--ui-ring);
|
|
outline-offset: var(--ui-focus-outline-offset);
|
|
}
|
|
|
|
&:active svg {
|
|
transform: translateY(var(--ui-pressed-offset));
|
|
}
|
|
}
|
|
|
|
.damage-panel__grid {
|
|
display: grid;
|
|
min-width: 0;
|
|
grid-template-columns:
|
|
minmax(0, 1fr)
|
|
var(--ui-character-result-count-inline-size)
|
|
var(--ui-character-result-share-inline-size);
|
|
column-gap: var(--ui-component-stroke-size);
|
|
}
|
|
|
|
.damage-panel__header {
|
|
flex: 0 0 auto;
|
|
padding-right: var(--ui-character-result-scrollbar-inline-size);
|
|
}
|
|
|
|
.damage-panel__heading {
|
|
appearance: none;
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: var(--ui-table-header-block-size);
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 0 4px;
|
|
border: 0;
|
|
border-top: var(--ui-component-stroke-size) solid var(--ui-result-panel-border);
|
|
border-bottom: var(--ui-component-stroke-size) solid var(--ui-result-divider);
|
|
background: var(--ui-result-header-background);
|
|
color: var(--ui-result-header-foreground);
|
|
font: inherit;
|
|
text-align: center;
|
|
}
|
|
|
|
button.damage-panel__heading {
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
color: var(--ui-primary-foreground);
|
|
filter: brightness(1.12);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--ui-focus-outline-size) solid var(--ui-ring);
|
|
outline-offset: var(--ui-focus-outline-offset);
|
|
}
|
|
}
|
|
|
|
.damage-panel__sort-indicator {
|
|
width: 0;
|
|
height: 0;
|
|
border-right: 4px solid transparent;
|
|
border-bottom: 6px solid currentColor;
|
|
border-left: 4px solid transparent;
|
|
|
|
&.is-ascending {
|
|
border-top: 6px solid currentColor;
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.damage-panel__body {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.damage-panel__row {
|
|
min-height: var(--ui-character-result-row-block-size);
|
|
border-bottom: var(--ui-component-stroke-size) solid var(--ui-result-divider);
|
|
background: var(--ui-result-row-background);
|
|
color: var(--ui-foreground);
|
|
|
|
&:nth-child(even) {
|
|
background: var(--ui-result-row-alt-background);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--ui-result-row-hover-background);
|
|
}
|
|
}
|
|
|
|
.damage-panel__skill-cell,
|
|
.damage-panel__cell {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
}
|
|
|
|
.damage-panel__skill-cell {
|
|
gap: var(--ui-control-gap);
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
.damage-panel__cell {
|
|
justify-content: center;
|
|
padding: 2px 4px;
|
|
border-left: var(--ui-component-stroke-size) solid var(--ui-result-divider);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Keep compact rows to the requested skill/count/share contract. This must follow the generic
|
|
// cell display rule so hidden detail columns cannot create a second implicit grid row.
|
|
.damage-panel__full-column {
|
|
display: none;
|
|
}
|
|
|
|
.damage-panel__icon-wrap {
|
|
position: relative;
|
|
width: var(--ui-character-result-icon-size);
|
|
height: var(--ui-character-result-icon-size);
|
|
flex: 0 0 var(--ui-character-result-icon-size);
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
image-rendering: pixelated;
|
|
}
|
|
}
|
|
|
|
.damage-panel__level {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: -4px;
|
|
right: -5px;
|
|
color: var(--ui-background);
|
|
font:
|
|
700 9px/1 Arial,
|
|
sans-serif;
|
|
text-shadow: none;
|
|
|
|
&::before {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0;
|
|
color: inherit;
|
|
font: inherit;
|
|
-webkit-text-stroke: 2px var(--dcalc-quality-primeval);
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
.damage-panel__skill-name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.damage-panel__count-field {
|
|
--ui-number-field-width: 100%;
|
|
--ui-field-padding-inline: 2px;
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.damage-panel__share {
|
|
color: var(--ui-muted-foreground);
|
|
}
|
|
|
|
.damage-panel__total {
|
|
display: flex;
|
|
min-height: var(--ui-character-result-footer-block-size);
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--ui-control-gap);
|
|
padding: 0 clamp(10px, 0.8vw, 16px);
|
|
border-top: var(--ui-component-stroke-size) solid var(--ui-result-panel-border);
|
|
background: var(--ui-result-total-background);
|
|
color: var(--ui-result-total-label);
|
|
|
|
strong {
|
|
color: var(--ui-result-total-value);
|
|
font-size: calc(var(--character-font-size, 12px) * 1.22);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.is-positive,
|
|
.is-positive strong {
|
|
color: var(--ui-success);
|
|
}
|
|
|
|
.is-negative,
|
|
.is-negative strong {
|
|
color: var(--ui-destructive);
|
|
}
|
|
|
|
@media (max-width: 1599px) {
|
|
.damage-panel.is-expanded .damage-panel__surface {
|
|
position: absolute;
|
|
z-index: 12;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: var(--ui-character-result-full-inline-size);
|
|
}
|
|
|
|
.damage-panel.is-expanded .damage-panel__grid {
|
|
grid-template-columns:
|
|
minmax(180px, 1fr)
|
|
var(--ui-character-result-cd-inline-size)
|
|
var(--ui-character-result-count-inline-size)
|
|
minmax(74px, 0.9fr)
|
|
minmax(74px, 1fr)
|
|
var(--ui-character-result-share-inline-size);
|
|
}
|
|
|
|
.damage-panel.is-expanded .damage-panel__full-column {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1600px) {
|
|
.damage-panel__toggle {
|
|
display: none;
|
|
}
|
|
|
|
.damage-panel__grid {
|
|
grid-template-columns:
|
|
minmax(180px, 1fr)
|
|
var(--ui-character-result-cd-inline-size)
|
|
var(--ui-character-result-count-inline-size)
|
|
minmax(var(--ui-character-result-value-min-inline-size), 0.9fr)
|
|
minmax(var(--ui-character-result-value-min-inline-size), 1fr)
|
|
var(--ui-character-result-share-inline-size);
|
|
}
|
|
|
|
.damage-panel__full-column {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.damage-panel__toggle svg {
|
|
transition: none;
|
|
}
|
|
}
|
|
</style>
|