优化页面样式

This commit is contained in:
2026-03-13 10:05:54 +08:00
parent 7445dc4cb0
commit 6b21626878
2 changed files with 264 additions and 52 deletions

View File

@@ -8,7 +8,8 @@
@close="handleClose"
>
<div class="global-tip">
编辑的是<strong>奖励对照表dice_reward / DiceReward 模型</strong>的权重<strong>结束索引end_index</strong>区分
编辑的是<strong>奖励对照表dice_reward / DiceReward 模型</strong
>的权重<strong>结束索引end_index</strong>区分
<strong>顺时针</strong><strong>逆时针</strong>两套权重抽奖时按当前方向取对应权重
</div>
<div v-loading="loading" class="dialog-body">
@@ -39,11 +40,35 @@
</div>
<div class="weight-sum weight-sum-t4t5" v-else>T4T5 仅单一结果无需配置权重</div>
<el-table :data="getTierItems(t)" border size="small" class="weight-table">
<el-table-column label="结束索引(id)" prop="id" width="90" align="center" show-overflow-tooltip />
<el-table-column
label="结束索引(id)"
prop="id"
width="90"
align="center"
show-overflow-tooltip
/>
<el-table-column label="色子点数" prop="grid_number" width="80" align="center" />
<el-table-column label="实际中奖金额" prop="real_ev" width="90" align="center" show-overflow-tooltip />
<el-table-column label="显示文本" prop="ui_text" min-width="70" align="center" show-overflow-tooltip />
<el-table-column label="备注" prop="remark" min-width="70" align="center" show-overflow-tooltip />
<el-table-column
label="实际中奖金额"
prop="real_ev"
width="90"
align="center"
show-overflow-tooltip
/>
<el-table-column
label="显示文本"
prop="ui_text"
min-width="70"
align="center"
show-overflow-tooltip
/>
<el-table-column
label="备注"
prop="remark"
min-width="70"
align="center"
show-overflow-tooltip
/>
<el-table-column label="顺时针权重(direction=0)" min-width="160" align="center">
<template #default="{ row }">
<div class="weight-cell-vertical">
@@ -58,7 +83,12 @@
class="weight-slider"
@update:model-value="
(v: number | number[]) =>
setItemWeightByRow(t, row, 'clockwise', Array.isArray(v) ? (v[0] ?? 1) : (v ?? 1))
setItemWeightByRow(
t,
row,
'clockwise',
Array.isArray(v) ? (v[0] ?? 1) : (v ?? 1)
)
"
/>
</div>
@@ -67,8 +97,16 @@
type="primary"
link
:disabled="isWeightDisabled(row, t) || getItemWeight(row, 'clockwise') <= 1"
@click="setItemWeightByRow(t, row, 'clockwise', Math.max(1, getItemWeight(row, 'clockwise') - 1))"
></el-button>
@click="
setItemWeightByRow(
t,
row,
'clockwise',
Math.max(1, getItemWeight(row, 'clockwise') - 1)
)
"
></el-button
>
<el-input-number
:model-value="getItemWeight(row, 'clockwise')"
:min="1"
@@ -91,9 +129,19 @@
<el-button
type="primary"
link
:disabled="isWeightDisabled(row, t) || getItemWeight(row, 'clockwise') >= 10000"
@click="setItemWeightByRow(t, row, 'clockwise', Math.min(10000, getItemWeight(row, 'clockwise') + 1))"
></el-button>
:disabled="
isWeightDisabled(row, t) || getItemWeight(row, 'clockwise') >= 10000
"
@click="
setItemWeightByRow(
t,
row,
'clockwise',
Math.min(10000, getItemWeight(row, 'clockwise') + 1)
)
"
></el-button
>
</div>
</div>
</template>
@@ -112,7 +160,12 @@
class="weight-slider"
@update:model-value="
(v: number | number[]) =>
setItemWeightByRow(t, row, 'counterclockwise', Array.isArray(v) ? (v[0] ?? 1) : (v ?? 1))
setItemWeightByRow(
t,
row,
'counterclockwise',
Array.isArray(v) ? (v[0] ?? 1) : (v ?? 1)
)
"
/>
</div>
@@ -120,9 +173,19 @@
<el-button
type="primary"
link
:disabled="isWeightDisabled(row, t) || getItemWeight(row, 'counterclockwise') <= 1"
@click="setItemWeightByRow(t, row, 'counterclockwise', Math.max(1, getItemWeight(row, 'counterclockwise') - 1))"
></el-button>
:disabled="
isWeightDisabled(row, t) || getItemWeight(row, 'counterclockwise') <= 1
"
@click="
setItemWeightByRow(
t,
row,
'counterclockwise',
Math.max(1, getItemWeight(row, 'counterclockwise') - 1)
)
"
></el-button
>
<el-input-number
:model-value="getItemWeight(row, 'counterclockwise')"
:min="1"
@@ -145,9 +208,20 @@
<el-button
type="primary"
link
:disabled="isWeightDisabled(row, t) || getItemWeight(row, 'counterclockwise') >= 10000"
@click="setItemWeightByRow(t, row, 'counterclockwise', Math.min(10000, getItemWeight(row, 'counterclockwise') + 1))"
></el-button>
:disabled="
isWeightDisabled(row, t) ||
getItemWeight(row, 'counterclockwise') >= 10000
"
@click="
setItemWeightByRow(
t,
row,
'counterclockwise',
Math.min(10000, getItemWeight(row, 'counterclockwise') + 1)
)
"
></el-button
>
</div>
</div>
</template>
@@ -253,8 +327,7 @@
const list = grouped.value[tier]
if (!list) return
const key = dir === 'clockwise' ? 'weight_clockwise' : 'weight_counterclockwise'
const rid =
dir === 'clockwise' ? row.reward_id_clockwise : row.reward_id_counterclockwise
const rid = dir === 'clockwise' ? row.reward_id_clockwise : row.reward_id_counterclockwise
const idx = list.findIndex(
(r) =>
r === row ||

View File

@@ -8,7 +8,8 @@
@close="handleClose"
>
<div class="global-tip">
配置<strong>奖励对照表dice_reward</strong>的权重一级按<strong>方向</strong>顺时针/逆时针二级按<strong>档位</strong>T1-T5各条权重 1-10000档位内按权重比抽取
配置<strong>奖励对照表dice_reward</strong>的权重一级按<strong>方向</strong>顺时针/逆时针二级按<strong>档位</strong>T1-T5各条权重
1-10000档位内按权重比抽取
</div>
<div v-loading="loading" class="dialog-body">
<!-- 一级方向二级档位放在各方向 pane 切换方向时二级能正常显示 -->
@@ -30,14 +31,50 @@
当前档位权重合计<strong>{{ getTierSumForCurrentDirection(t) }}</strong>
各条 1-10000档位内按权重比抽取和不限制
</div>
<div class="weight-sum weight-sum-t4t5" v-else>T4T5 仅单一结果无需配置权重</div>
<div class="weight-sum weight-sum-t4t5" v-else
>T4T5 仅单一结果无需配置权重</div
>
<el-table :data="getTierItems(t)" border size="small" class="weight-table">
<el-table-column label="点数(grid_number)" prop="grid_number" width="110" align="center" show-overflow-tooltip />
<el-table-column label="结束索引(id)" prop="id" width="90" align="center" show-overflow-tooltip />
<el-table-column label="实际中奖金额" prop="real_ev" width="90" align="center" show-overflow-tooltip />
<el-table-column label="显示文本" prop="ui_text" min-width="70" align="center" show-overflow-tooltip />
<el-table-column label="备注" prop="remark" min-width="70" align="center" show-overflow-tooltip />
<el-table-column :label="currentDirectionLabel + ' 权重(1-10000)'" min-width="200" align="center">
<el-table-column
label="点数(grid_number)"
prop="grid_number"
width="110"
align="center"
show-overflow-tooltip
/>
<el-table-column
label="结束索引(id)"
prop="id"
width="90"
align="center"
show-overflow-tooltip
/>
<el-table-column
label="实际中奖金额"
prop="real_ev"
width="90"
align="center"
show-overflow-tooltip
/>
<el-table-column
label="显示文本"
prop="ui_text"
min-width="70"
align="center"
show-overflow-tooltip
/>
<el-table-column
label="备注"
prop="remark"
min-width="70"
align="center"
show-overflow-tooltip
/>
<el-table-column
:label="currentDirectionLabel + ' 权重(1-10000)'"
min-width="200"
align="center"
>
<template #default="{ row }">
<div class="weight-cell-vertical">
<div class="weight-slider-wrap">
@@ -49,16 +86,32 @@
size="small"
:disabled="isWeightDisabled(row, t)"
class="weight-slider"
@update:model-value="(v: number | number[]) => setItemWeightForCurrentDirection(t, row, Array.isArray(v) ? (v[0] ?? 1) : (v ?? 1))"
@update:model-value="
(v: number | number[]) =>
setItemWeightForCurrentDirection(
t,
row,
Array.isArray(v) ? (v[0] ?? 1) : (v ?? 1)
)
"
/>
</div>
<div class="weight-input-wrap">
<el-button
type="primary"
link
:disabled="isWeightDisabled(row, t) || getItemWeightForCurrentDirection(row) <= 1"
@click="setItemWeightForCurrentDirection(t, row, Math.max(1, getItemWeightForCurrentDirection(row) - 1))"
></el-button>
:disabled="
isWeightDisabled(row, t) || getItemWeightForCurrentDirection(row) <= 1
"
@click="
setItemWeightForCurrentDirection(
t,
row,
Math.max(1, getItemWeightForCurrentDirection(row) - 1)
)
"
></el-button
>
<el-input-number
:model-value="getItemWeightForCurrentDirection(row)"
:min="1"
@@ -68,14 +121,31 @@
controls-position="right"
size="small"
class="weight-input"
@update:model-value="(v: number | string | undefined) => setItemWeightForCurrentDirection(t, row, typeof v === 'number' && !Number.isNaN(v) ? v : Number(v) || 1)"
@update:model-value="
(v: number | string | undefined) =>
setItemWeightForCurrentDirection(
t,
row,
typeof v === 'number' && !Number.isNaN(v) ? v : Number(v) || 1
)
"
/>
<el-button
type="primary"
link
:disabled="isWeightDisabled(row, t) || getItemWeightForCurrentDirection(row) >= 10000"
@click="setItemWeightForCurrentDirection(t, row, Math.min(10000, getItemWeightForCurrentDirection(row) + 1))"
></el-button>
:disabled="
isWeightDisabled(row, t) ||
getItemWeightForCurrentDirection(row) >= 10000
"
@click="
setItemWeightForCurrentDirection(
t,
row,
Math.min(10000, getItemWeightForCurrentDirection(row) + 1)
)
"
></el-button
>
</div>
</div>
</template>
@@ -85,7 +155,7 @@
</el-tab-pane>
</el-tabs>
</el-tab-pane>
<el-tab-pane label="逆时针 (direction=1)" name="1">
<el-tab-pane label="逆时针" name="1">
<el-tabs v-model="activeTier" type="card" class="tier-tabs">
<el-tab-pane v-for="t in tierKeys" :key="'ccw-' + t" :label="t" :name="t">
<div v-if="getTierItems(t).length === 0" class="empty-tip">该档位暂无配置数据</div>
@@ -102,14 +172,50 @@
当前档位权重合计:<strong>{{ getTierSumForCurrentDirection(t) }}</strong>
(各条 1-10000档位内按权重比抽取和不限制
</div>
<div class="weight-sum weight-sum-t4t5" v-else>T4、T5 仅单一结果,无需配置权重。</div>
<div class="weight-sum weight-sum-t4t5" v-else
>T4、T5 仅单一结果,无需配置权重。</div
>
<el-table :data="getTierItems(t)" border size="small" class="weight-table">
<el-table-column label="点数(grid_number)" prop="grid_number" width="110" align="center" show-overflow-tooltip />
<el-table-column label="结束索引(id)" prop="id" width="90" align="center" show-overflow-tooltip />
<el-table-column label="实际中奖金额" prop="real_ev" width="90" align="center" show-overflow-tooltip />
<el-table-column label="显示文本" prop="ui_text" min-width="70" align="center" show-overflow-tooltip />
<el-table-column label="备注" prop="remark" min-width="70" align="center" show-overflow-tooltip />
<el-table-column :label="currentDirectionLabel + ' 权重(1-10000)'" min-width="200" align="center">
<el-table-column
label="点数(grid_number)"
prop="grid_number"
width="110"
align="center"
show-overflow-tooltip
/>
<el-table-column
label="结束索引(id)"
prop="id"
width="90"
align="center"
show-overflow-tooltip
/>
<el-table-column
label="实际中奖金额"
prop="real_ev"
width="90"
align="center"
show-overflow-tooltip
/>
<el-table-column
label="显示文本"
prop="ui_text"
min-width="70"
align="center"
show-overflow-tooltip
/>
<el-table-column
label="备注"
prop="remark"
min-width="70"
align="center"
show-overflow-tooltip
/>
<el-table-column
:label="currentDirectionLabel + ' 权重(1-10000)'"
min-width="200"
align="center"
>
<template #default="{ row }">
<div class="weight-cell-vertical">
<div class="weight-slider-wrap">
@@ -121,16 +227,32 @@
size="small"
:disabled="isWeightDisabled(row, t)"
class="weight-slider"
@update:model-value="(v: number | number[]) => setItemWeightForCurrentDirection(t, row, Array.isArray(v) ? (v[0] ?? 1) : (v ?? 1))"
@update:model-value="
(v: number | number[]) =>
setItemWeightForCurrentDirection(
t,
row,
Array.isArray(v) ? (v[0] ?? 1) : (v ?? 1)
)
"
/>
</div>
<div class="weight-input-wrap">
<el-button
type="primary"
link
:disabled="isWeightDisabled(row, t) || getItemWeightForCurrentDirection(row) <= 1"
@click="setItemWeightForCurrentDirection(t, row, Math.max(1, getItemWeightForCurrentDirection(row) - 1))"
></el-button>
:disabled="
isWeightDisabled(row, t) || getItemWeightForCurrentDirection(row) <= 1
"
@click="
setItemWeightForCurrentDirection(
t,
row,
Math.max(1, getItemWeightForCurrentDirection(row) - 1)
)
"
></el-button
>
<el-input-number
:model-value="getItemWeightForCurrentDirection(row)"
:min="1"
@@ -140,14 +262,31 @@
controls-position="right"
size="small"
class="weight-input"
@update:model-value="(v: number | string | undefined) => setItemWeightForCurrentDirection(t, row, typeof v === 'number' && !Number.isNaN(v) ? v : Number(v) || 1)"
@update:model-value="
(v: number | string | undefined) =>
setItemWeightForCurrentDirection(
t,
row,
typeof v === 'number' && !Number.isNaN(v) ? v : Number(v) || 1
)
"
/>
<el-button
type="primary"
link
:disabled="isWeightDisabled(row, t) || getItemWeightForCurrentDirection(row) >= 10000"
@click="setItemWeightForCurrentDirection(t, row, Math.min(10000, getItemWeightForCurrentDirection(row) + 1))"
></el-button>
:disabled="
isWeightDisabled(row, t) ||
getItemWeightForCurrentDirection(row) >= 10000
"
@click="
setItemWeightForCurrentDirection(
t,
row,
Math.min(10000, getItemWeightForCurrentDirection(row) + 1)
)
"
></el-button
>
</div>
</div>
</template>