feat(items): replace dyeable booleans with dyeability level

Add dyeability integer field to support up to triple dyeable items
Update frontend forms to use a radio group for dyeability selection
This commit is contained in:
2026-05-07 10:17:45 +08:00
parent 515297ab74
commit 23a7301598
10 changed files with 230 additions and 100 deletions

View File

@@ -645,8 +645,11 @@ Pokemon 详情页展示:
- Road
- 入手方式:可多选
- 客制化:
- 染色
-双区染色
- 染色能力:`dyeability`,使用互斥枚举值维护:
- `0`:不可染色
- `1`:可染色
- `2`:可双区染色
- `3`:可三区染色
- 可改花纹
- 无材料单:`no_recipe`
- 标签:使用喜欢的东西配置,可多选

View File

@@ -905,6 +905,7 @@ CREATE TABLE IF NOT EXISTS items (
ancient_artifact_category_key text,
category_key text NOT NULL DEFAULT 'other',
usage_key text,
dyeability integer NOT NULL DEFAULT 0 CHECK (dyeability IN (0, 1, 2, 3)),
dyeable boolean NOT NULL DEFAULT false,
dual_dyeable boolean NOT NULL DEFAULT false,
pattern_editable boolean NOT NULL DEFAULT false,
@@ -1276,3 +1277,15 @@ CREATE INDEX IF NOT EXISTS entity_discussion_comments_ai_moderation_language_idx
ALTER TABLE skills
ADD COLUMN IF NOT EXISTS has_trading boolean NOT NULL DEFAULT false;
ALTER TABLE items
ADD COLUMN IF NOT EXISTS dyeability integer NOT NULL DEFAULT 0 CHECK (dyeability IN (0, 1, 2, 3));
UPDATE items
SET dyeability = CASE
WHEN dual_dyeable THEN 2
WHEN dyeable THEN 1
ELSE 0
END
WHERE dyeability = 0
AND (dual_dyeable OR dyeable);

View File

@@ -223,8 +223,7 @@ type ItemPayload = {
categoryKey: string;
usageId: number | null;
usageKey: string | null;
dyeable: boolean;
dualDyeable: boolean;
dyeability: number;
patternEditable: boolean;
noRecipe: boolean;
isEventItem: boolean;
@@ -565,7 +564,7 @@ type ItemChangeSource = {
image: EntityImageValue | null;
category: { name: string };
usage: { name: string } | null;
customization: { dyeable: boolean; dualDyeable: boolean; patternEditable: boolean };
customization: { dyeability: number; patternEditable: boolean };
noRecipe: boolean;
acquisitionMethods: Array<{ name: string }>;
tags: Array<{ name: string }>;
@@ -2436,8 +2435,7 @@ async function itemEditChanges(
pushChange(changes, 'Image', imagePathLabel(before.image?.path), imagePathLabel(after.imagePath));
pushChange(changes, 'Category', before.category.name, systemListNameByKey(itemCategoryOptions, after.categoryKey));
pushChange(changes, 'Usage', before.usage?.name, systemListNameByKey(itemUsageOptions, after.usageKey));
pushChange(changes, 'Dyeable', boolValue(before.customization.dyeable), boolValue(after.dyeable));
pushChange(changes, 'Dual dyeable', boolValue(before.customization.dualDyeable), boolValue(after.dualDyeable));
pushChange(changes, 'Dyeability', dyeabilityValue(before.customization.dyeability), dyeabilityValue(after.dyeability));
pushChange(changes, 'Pattern editable', boolValue(before.customization.patternEditable), boolValue(after.patternEditable));
pushChange(changes, 'No recipe', boolValue(before.noRecipe), boolValue(after.noRecipe));
pushChange(changes, 'Acquisition methods', namedListValue(before.acquisitionMethods), namesFromIds(after.acquisitionMethodIds, methodNames));
@@ -6597,8 +6595,7 @@ function itemProjection(locale: string): string {
ELSE ${systemListJsonSql('i.usage_key', itemUsageOptions, locale)}
END AS usage,
json_build_object(
'dyeable', i.dyeable,
'dualDyeable', i.dual_dyeable,
'dyeability', i.dyeability,
'patternEditable', i.pattern_editable
) AS customization,
i.no_recipe AS "noRecipe",
@@ -6928,8 +6925,7 @@ function cleanItemPayload(payload: Record<string, unknown>): ItemPayload {
categoryKey: category.key,
usageId,
usageKey: usage?.key ?? null,
dyeable: Boolean(payload.dyeable),
dualDyeable: Boolean(payload.dualDyeable),
dyeability: cleanDyeability(payload),
patternEditable: Boolean(payload.patternEditable),
noRecipe: Boolean(payload.noRecipe),
isEventItem: Boolean(payload.isEventItem),
@@ -6949,6 +6945,38 @@ function cleanOptionalPositiveInteger(value: unknown): number | null {
return requirePositiveInteger(value, 'server.validation.invalidField');
}
function cleanDyeability(payload: Record<string, unknown>): number {
if (payload.dyeability === undefined || payload.dyeability === null || payload.dyeability === '') {
if (payload.dualDyeable === true) {
return 2;
}
if (payload.dyeable === true) {
return 1;
}
return 0;
}
const dyeability = Number(payload.dyeability);
if (!Number.isInteger(dyeability) || dyeability < 0 || dyeability > 3) {
throw validationError('server.validation.invalidField');
}
return dyeability;
}
function dyeabilityValue(value: number): string {
if (value === 3) {
return 'Triple dyeable';
}
if (value === 2) {
return 'Dual dyeable';
}
if (value === 1) {
return 'Dyeable';
}
return 'Not dyeable';
}
async function orderedItemIds(client: DbClient, isEventItem: boolean): Promise<number[]> {
const rows = await client.query<{ id: number }>(
'SELECT id FROM items WHERE is_event_item = $1 ORDER BY sort_order, id',
@@ -7001,6 +7029,7 @@ export async function createItem(payload: Record<string, unknown>, userId: numbe
base_price,
category_key,
usage_key,
dyeability,
dyeable,
dual_dyeable,
pattern_editable,
@@ -7011,7 +7040,7 @@ export async function createItem(payload: Record<string, unknown>, userId: numbe
created_by_user_id,
updated_by_user_id
)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $14)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $15)
RETURNING id
`,
[
@@ -7021,8 +7050,9 @@ export async function createItem(payload: Record<string, unknown>, userId: numbe
cleanPayload.basePrice,
cleanPayload.categoryKey,
cleanPayload.usageKey,
cleanPayload.dyeable,
cleanPayload.dualDyeable,
cleanPayload.dyeability,
cleanPayload.dyeability >= 1,
cleanPayload.dyeability >= 2,
cleanPayload.patternEditable,
cleanPayload.noRecipe,
cleanPayload.isEventItem,
@@ -7078,15 +7108,16 @@ export async function updateItem(id: number, payload: Record<string, unknown>, u
base_price = $4,
category_key = $5,
usage_key = $6,
dyeable = $7,
dual_dyeable = $8,
pattern_editable = $9,
no_recipe = $10,
is_event_item = $11,
image_path = $12,
updated_by_user_id = $13,
dyeability = $7,
dyeable = $8,
dual_dyeable = $9,
pattern_editable = $10,
no_recipe = $11,
is_event_item = $12,
image_path = $13,
updated_by_user_id = $14,
updated_at = now()
WHERE id = $14
WHERE id = $15
`,
[
cleanPayload.name,
@@ -7095,8 +7126,9 @@ export async function updateItem(id: number, payload: Record<string, unknown>, u
cleanPayload.basePrice,
cleanPayload.categoryKey,
cleanPayload.usageKey,
cleanPayload.dyeable,
cleanPayload.dualDyeable,
cleanPayload.dyeability,
cleanPayload.dyeability >= 1,
cleanPayload.dyeability >= 2,
cleanPayload.patternEditable,
cleanPayload.noRecipe,
cleanPayload.isEventItem,
@@ -8041,6 +8073,7 @@ const dataToolColumns = {
'ancient_artifact_category_key',
'category_key',
'usage_key',
'dyeability',
'dyeable',
'dual_dyeable',
'pattern_editable',
@@ -8306,6 +8339,16 @@ function normalizeImportValue(value: unknown): unknown {
}
function normalizeImportColumnValue(row: Record<string, unknown>, column: string): unknown {
if (column === 'dyeability' && row[column] === undefined) {
if (row.dual_dyeable === true) {
return 2;
}
if (row.dyeable === true) {
return 1;
}
return 0;
}
return normalizeImportValue(row[column]);
}

View File

@@ -55,10 +55,14 @@ const changeLabelKeys: Record<string, string> = {
'Base Price': 'pages.items.basePrice',
'Base price': 'pages.items.basePrice',
基础价格: 'pages.items.basePrice',
Dyeability: 'pages.items.dyeability',
染色能力: 'pages.items.dyeability',
Dyeable: 'pages.items.dyeable',
可染色: 'pages.items.dyeable',
'Dual dyeable': 'pages.items.dualDyeable',
可双区染色: 'pages.items.dualDyeable',
'Triple dyeable': 'pages.items.tripleDyeable',
可三区染色: 'pages.items.tripleDyeable',
'Pattern editable': 'pages.items.patternEditable',
可改花纹: 'pages.items.patternEditable',
'No recipe': 'pages.items.noRecipe',
@@ -117,6 +121,14 @@ function changeValue(value: string): string {
const values: Record<string, string> = {
None: t('common.none'),
: t('common.none'),
'Not dyeable': t('pages.items.notDyeable'),
不可染色: t('pages.items.notDyeable'),
Dyeable: t('pages.items.dyeable'),
可染色: t('pages.items.dyeable'),
'Dual dyeable': t('pages.items.dualDyeable'),
可双区染色: t('pages.items.dualDyeable'),
'Triple dyeable': t('pages.items.tripleDyeable'),
可三区染色: t('pages.items.tripleDyeable'),
Yes: locale.value === 'zh-CN' ? '是' : 'Yes',
: locale.value === 'zh-CN' ? '是' : 'Yes',
No: locale.value === 'zh-CN' ? '否' : 'No',

View File

@@ -325,8 +325,7 @@ export interface Item extends EditInfo {
category: NamedEntity;
usage: NamedEntity | null;
customization: {
dyeable: boolean;
dualDyeable: boolean;
dyeability: number;
patternEditable: boolean;
};
noRecipe: boolean;
@@ -873,8 +872,7 @@ export interface ItemPayload {
translations?: TranslationMap;
categoryId: number;
usageId: number | null;
dyeable: boolean;
dualDyeable: boolean;
dyeability: number;
patternEditable: boolean;
noRecipe: boolean;
isEventItem: boolean;

View File

@@ -7477,6 +7477,46 @@ button:disabled,
align-items: center;
}
.radio-group {
display: grid;
gap: 7px;
min-width: 0;
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.radio-group legend {
padding: 0;
color: var(--ink-soft);
font-size: 14px;
font-weight: 850;
}
.radio-group__options {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
}
.radio-group__option {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 36px;
color: var(--ink-soft);
font-weight: 850;
cursor: pointer;
}
.radio-group__option input {
width: 18px;
height: 18px;
accent-color: var(--pokemon-blue);
}
.row-actions {
flex: 0 0 auto;
flex-wrap: wrap;

View File

@@ -117,9 +117,14 @@ const customization = computed(() => {
return [];
}
const dyeabilityLabels: Record<number, string> = {
1: t('pages.items.dyeable'),
2: t('pages.items.dualDyeable'),
3: t('pages.items.tripleDyeable')
};
return [
item.value.customization.dyeable ? t('pages.items.dyeable') : '',
item.value.customization.dualDyeable ? t('pages.items.dualDyeable') : '',
dyeabilityLabels[item.value.customization.dyeability] ?? '',
item.value.customization.patternEditable ? t('pages.items.patternEditable') : ''
].filter(Boolean);
});

View File

@@ -34,6 +34,9 @@ const loading = ref(true);
const busy = ref(false);
const message = ref('');
const creatingSelect = ref('');
type Dyeability = 0 | 1 | 2 | 3;
const itemForm = ref({
name: '',
details: '',
@@ -42,8 +45,7 @@ const itemForm = ref({
translations: {} as TranslationMap,
categoryId: '',
usageId: '',
dyeable: false,
dualDyeable: false,
dyeability: 0 as Dyeability,
patternEditable: false,
noRecipe: false,
isEventItem: false,
@@ -55,8 +57,7 @@ const itemForm = ref({
type ItemCreateDefaults = {
categoryId: string;
usageId: string;
dyeable: boolean;
dualDyeable: boolean;
dyeability: Dyeability;
patternEditable: boolean;
noRecipe: boolean;
acquisitionMethodIds: string[];
@@ -100,6 +101,12 @@ const ancientArtifactOptions = computed(() => [
{ value: '', label: t('common.no') },
...(options.value?.ancientArtifactCategories.map((item) => ({ value: String(item.id), label: item.name })) ?? [])
]);
const dyeabilityOptions = computed<Array<{ value: Dyeability; label: string }>>(() => [
{ value: 0, label: t('pages.items.notDyeable') },
{ value: 1, label: t('pages.items.dyeable') },
{ value: 2, label: t('pages.items.dualDyeable') },
{ value: 3, label: t('pages.items.tripleDyeable') }
]);
const canCreateConfig = computed(() => currentUser.value?.permissions.includes('admin.config.create') === true);
const canUploadImage = computed(() => currentUser.value?.permissions.includes('items.upload') === true);
@@ -117,13 +124,26 @@ function errorText(error: unknown, fallback: string) {
return error instanceof Error && error.message ? error.message : fallback;
}
function defaultDyeability(value: { dyeability?: unknown; dualDyeable?: unknown; dyeable?: unknown }): Dyeability {
const dyeability = Number(value.dyeability);
if (Number.isInteger(dyeability) && dyeability >= 0 && dyeability <= 3) {
return dyeability as Dyeability;
}
if (value.dualDyeable === true) {
return 2;
}
if (value.dyeable === true) {
return 1;
}
return 0;
}
function readItemCreateDefaults(): ItemCreateDefaults {
if (typeof sessionStorage === 'undefined') {
return {
categoryId: '',
usageId: '',
dyeable: false,
dualDyeable: false,
dyeability: 0,
patternEditable: false,
noRecipe: false,
acquisitionMethodIds: []
@@ -136,8 +156,7 @@ function readItemCreateDefaults(): ItemCreateDefaults {
return {
categoryId: '',
usageId: '',
dyeable: false,
dualDyeable: false,
dyeability: 0,
patternEditable: false,
noRecipe: false,
acquisitionMethodIds: []
@@ -148,8 +167,7 @@ function readItemCreateDefaults(): ItemCreateDefaults {
return {
categoryId: typeof parsedValue.categoryId === 'string' ? parsedValue.categoryId : '',
usageId: typeof parsedValue.usageId === 'string' ? parsedValue.usageId : '',
dyeable: parsedValue.dyeable === true,
dualDyeable: parsedValue.dualDyeable === true,
dyeability: defaultDyeability(parsedValue),
patternEditable: parsedValue.patternEditable === true,
noRecipe: parsedValue.noRecipe === true,
acquisitionMethodIds: Array.isArray(parsedValue.acquisitionMethodIds)
@@ -160,8 +178,7 @@ function readItemCreateDefaults(): ItemCreateDefaults {
return {
categoryId: '',
usageId: '',
dyeable: false,
dualDyeable: false,
dyeability: 0,
patternEditable: false,
noRecipe: false,
acquisitionMethodIds: []
@@ -185,8 +202,7 @@ function applyItemCreateDefaults(isEventItem: boolean) {
categoryId: categoryIds.has(defaults.categoryId) ? defaults.categoryId : '',
usageId: usageIds.has(defaults.usageId) ? defaults.usageId : '',
ancientArtifactCategoryId: isAncientArtifactCreate.value ? String(loadedOptions.ancientArtifactCategories[0]?.id ?? '') : '',
dyeable: defaults.dyeable,
dualDyeable: defaults.dualDyeable,
dyeability: defaults.dyeability,
patternEditable: defaults.patternEditable,
noRecipe: defaults.noRecipe,
isEventItem,
@@ -237,8 +253,7 @@ async function loadEditor() {
translations: item.translations ?? {},
categoryId: String(item.category.id),
usageId: item.usage ? String(item.usage.id) : '',
dyeable: item.customization.dyeable,
dualDyeable: item.customization.dualDyeable,
dyeability: defaultDyeability(item.customization),
patternEditable: item.customization.patternEditable,
noRecipe: item.noRecipe,
isEventItem: item.isEventItem,
@@ -293,8 +308,7 @@ async function saveItem() {
translations: itemForm.value.translations,
categoryId: Number(itemForm.value.categoryId),
usageId: itemForm.value.usageId ? Number(itemForm.value.usageId) : null,
dyeable: itemForm.value.dyeable,
dualDyeable: itemForm.value.dualDyeable,
dyeability: itemForm.value.dyeability,
patternEditable: itemForm.value.patternEditable,
noRecipe: itemForm.value.noRecipe,
isEventItem: itemForm.value.isEventItem,
@@ -418,9 +432,19 @@ onMounted(() => {
</fieldset>
</div>
<div class="field">
<fieldset class="radio-group">
<legend>{{ t('pages.items.dyeability') }}</legend>
<div class="radio-group__options">
<label v-for="option in dyeabilityOptions" :key="option.value" class="radio-group__option">
<input v-model="itemForm.dyeability" type="radio" name="item-dyeability" :value="option.value" />
<span>{{ option.label }}</span>
</label>
</div>
</fieldset>
</div>
<div class="check-row">
<label><input v-model="itemForm.dyeable" type="checkbox" /> {{ t('pages.items.dyeable') }}</label>
<label><input v-model="itemForm.dualDyeable" type="checkbox" /> {{ t('pages.items.dualDyeable') }}</label>
<label><input v-model="itemForm.patternEditable" type="checkbox" /> {{ t('pages.items.patternEditable') }}</label>
<label><input v-model="itemForm.noRecipe" type="checkbox" :disabled="hasRecipe" /> {{ t('pages.items.noRecipe') }}</label>
<label><input v-model="itemForm.isEventItem" type="checkbox" :disabled="isEventCreate" /> {{ t('pages.items.eventItem') }}</label>
@@ -492,46 +516,6 @@ onMounted(() => {
min-width: 0;
}
.radio-group {
display: grid;
gap: 7px;
min-width: 0;
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.radio-group legend {
padding: 0;
color: var(--ink-soft);
font-size: 14px;
font-weight: 850;
}
.radio-group__options {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
}
.radio-group__option {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 36px;
color: var(--ink-soft);
font-weight: 850;
cursor: pointer;
}
.radio-group__option input {
width: 18px;
height: 18px;
accent-color: var(--pokemon-blue);
}
@media (max-width: 720px) {
.item-edit-row--name-price,
.item-edit-row--category-usage {

View File

@@ -48,11 +48,12 @@ const suppressNextItemClick = ref(false);
const dragSourceItems = ref<Item[]>([]);
const dropCommitted = ref(false);
type Dyeability = 0 | 1 | 2 | 3;
type ItemCreateDefaults = {
categoryId: string;
usageId: string;
dyeable: boolean;
dualDyeable: boolean;
dyeability: Dyeability;
patternEditable: boolean;
noRecipe: boolean;
acquisitionMethodIds: string[];
@@ -63,8 +64,7 @@ const itemCreateDefaultsStorageKey = 'pokopia_item_create_defaults';
const emptyItemCreateDefaults = (): ItemCreateDefaults => ({
categoryId: '',
usageId: '',
dyeable: false,
dualDyeable: false,
dyeability: 0,
patternEditable: false,
noRecipe: false,
acquisitionMethodIds: []
@@ -96,6 +96,12 @@ const categoryTabs = computed<TabOption[]>(() => [
{ value: '', label: t('common.all') },
...(options.value?.itemCategories.map((item) => ({ value: String(item.id), label: item.name })) ?? [])
]);
const dyeabilityOptions = computed<Array<{ value: Dyeability; label: string }>>(() => [
{ value: 0, label: t('pages.items.notDyeable') },
{ value: 1, label: t('pages.items.dyeable') },
{ value: 2, label: t('pages.items.dualDyeable') },
{ value: 3, label: t('pages.items.tripleDyeable') }
]);
const itemQuery = computed(() => ({
search: search.value,
@@ -156,8 +162,7 @@ const hasItemCreateDefaults = computed(
() =>
itemCreateDefaults.value.categoryId !== '' ||
itemCreateDefaults.value.usageId !== '' ||
itemCreateDefaults.value.dyeable ||
itemCreateDefaults.value.dualDyeable ||
itemCreateDefaults.value.dyeability !== 0 ||
itemCreateDefaults.value.patternEditable ||
itemCreateDefaults.value.noRecipe ||
itemCreateDefaults.value.acquisitionMethodIds.length > 0
@@ -218,6 +223,20 @@ function menuPositionForEvent(event: MouseEvent | KeyboardEvent) {
return clampMenuPosition(window.innerWidth / 2, window.innerHeight / 2);
}
function defaultDyeability(value: { dyeability?: unknown; dualDyeable?: unknown; dyeable?: unknown }): Dyeability {
const dyeability = Number(value.dyeability);
if (Number.isInteger(dyeability) && dyeability >= 0 && dyeability <= 3) {
return dyeability as Dyeability;
}
if (value.dualDyeable === true) {
return 2;
}
if (value.dyeable === true) {
return 1;
}
return 0;
}
function readItemCreateDefaults(): ItemCreateDefaults {
if (typeof sessionStorage === 'undefined') {
return emptyItemCreateDefaults();
@@ -233,8 +252,7 @@ function readItemCreateDefaults(): ItemCreateDefaults {
return {
categoryId: typeof parsedValue.categoryId === 'string' ? parsedValue.categoryId : '',
usageId: typeof parsedValue.usageId === 'string' ? parsedValue.usageId : '',
dyeable: parsedValue.dyeable === true,
dualDyeable: parsedValue.dualDyeable === true,
dyeability: defaultDyeability(parsedValue),
patternEditable: parsedValue.patternEditable === true,
noRecipe: parsedValue.noRecipe === true,
acquisitionMethodIds: Array.isArray(parsedValue.acquisitionMethodIds)
@@ -638,9 +656,17 @@ watch(itemSortingAllowed, (allowed) => {
/>
</div>
<fieldset class="radio-group">
<legend>{{ t('pages.items.dyeability') }}</legend>
<div class="radio-group__options">
<label v-for="option in dyeabilityOptions" :key="option.value" class="radio-group__option">
<input v-model="itemCreateDefaults.dyeability" type="radio" name="item-default-dyeability" :value="option.value" />
<span>{{ option.label }}</span>
</label>
</div>
</fieldset>
<div class="check-row item-create-defaults-menu__checks">
<label><input v-model="itemCreateDefaults.dyeable" type="checkbox" /> {{ t('pages.items.dyeable') }}</label>
<label><input v-model="itemCreateDefaults.dualDyeable" type="checkbox" /> {{ t('pages.items.dualDyeable') }}</label>
<label><input v-model="itemCreateDefaults.patternEditable" type="checkbox" /> {{ t('pages.items.patternEditable') }}</label>
<label><input v-model="itemCreateDefaults.noRecipe" type="checkbox" /> {{ t('pages.items.noRecipe') }}</label>
</div>

View File

@@ -708,8 +708,11 @@ export const systemWordingMessages = {
tags: 'Tags',
acquisitionMethods: 'Acquisition methods',
customization: 'Customization',
dyeability: 'Dyeability',
notDyeable: 'Not dyeable',
dyeable: 'Dyeable',
dualDyeable: 'Dual dyeable',
tripleDyeable: 'Triple dyeable',
patternEditable: 'Pattern editable',
noRecipe: 'No recipe',
eventItem: 'Event item',
@@ -2075,8 +2078,11 @@ export const systemWordingMessages = {
tags: '标签',
acquisitionMethods: '入手方式',
customization: '自定义',
dyeability: '染色能力',
notDyeable: '不可染色',
dyeable: '可染色',
dualDyeable: '可双区染色',
tripleDyeable: '可三区染色',
patternEditable: '可改花纹',
noRecipe: '无材料单',
eventItem: '活动物品',