feat(ui): add session defaults menu for item creation
Support presetting category, checkboxes, and acquisition methods. Persist defaults in sessionStorage to streamline repetitive data entry.
This commit is contained in:
@@ -638,6 +638,7 @@ Items 与 Event Items 使用相同数据模型:
|
|||||||
- 按用途筛选
|
- 按用途筛选
|
||||||
- 按标签筛选
|
- 按标签筛选
|
||||||
- 按自定义排序展示
|
- 按自定义排序展示
|
||||||
|
- 新增物品入口支持当前浏览器 Session 的默认值菜单;用户可为新建物品预设分类、客制化勾选项和入手方式。默认值只影响 `/items/new` 与 `/event-items/new` 的新建表单初始值,不影响编辑已有物品,不改变 API、数据库模型、权限或审计行为;Event Items 仍由 `/event-items/new` 入口决定 `is_event_item`。
|
||||||
- 物品列表桌面端使用 12 列紧凑 Grid,每个格子只展示物品图标;有用途的物品在卡片左上角以斜 Ribbon 展示用途名称;物品名称通过 hover / focus Tooltip 展示。
|
- 物品列表桌面端使用 12 列紧凑 Grid,每个格子只展示物品图标;有用途的物品在卡片左上角以斜 Ribbon 展示用途名称;物品名称通过 hover / focus Tooltip 展示。
|
||||||
- 物品列表移动端保持常规卡片布局,展示物品图标、名称和分类。
|
- 物品列表移动端保持常规卡片布局,展示物品图标、名称和分类。
|
||||||
- 物品列表不展示标签、入手方式或编辑元信息。
|
- 物品列表不展示标签、入手方式或编辑元信息。
|
||||||
|
|||||||
@@ -1346,6 +1346,96 @@ button:disabled,
|
|||||||
box-shadow: 0 2px 0 var(--line);
|
box-shadow: 0 2px 0 var(--line);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-create-action {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-action__control {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: stretch;
|
||||||
|
border-radius: var(--radius-control);
|
||||||
|
box-shadow: 0 2px 0 var(--line-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-action__control .ui-button {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-action__control .ui-button:hover,
|
||||||
|
.item-create-action__control .ui-button:active {
|
||||||
|
transform: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-action__control .ui-button:disabled {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-action__primary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-action__menu-button {
|
||||||
|
position: relative;
|
||||||
|
min-width: 38px;
|
||||||
|
padding-inline: 8px;
|
||||||
|
border-left-width: 1px;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-action__control.has-defaults .item-create-action__menu-button::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
right: 6px;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border: 1px solid var(--line-strong);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--pokemon-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-defaults-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 8px);
|
||||||
|
right: 0;
|
||||||
|
z-index: 45;
|
||||||
|
width: min(360px, calc(100vw - 32px));
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 2px solid var(--line-strong);
|
||||||
|
border-radius: var(--radius-card);
|
||||||
|
background: var(--surface);
|
||||||
|
box-shadow: var(--shadow-raised);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-defaults-menu__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-defaults-menu__header strong {
|
||||||
|
color: var(--ink);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-defaults-menu .field {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-create-defaults-menu__checks {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-panel,
|
.filter-panel,
|
||||||
.toolbar {
|
.toolbar {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|||||||
@@ -51,6 +51,17 @@ const itemForm = ref({
|
|||||||
imagePath: ''
|
imagePath: ''
|
||||||
});
|
});
|
||||||
|
|
||||||
|
type ItemCreateDefaults = {
|
||||||
|
categoryId: string;
|
||||||
|
dyeable: boolean;
|
||||||
|
dualDyeable: boolean;
|
||||||
|
patternEditable: boolean;
|
||||||
|
noRecipe: boolean;
|
||||||
|
acquisitionMethodIds: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemCreateDefaultsStorageKey = 'pokopia_item_create_defaults';
|
||||||
|
|
||||||
const routeId = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
|
const routeId = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
|
||||||
const isEditing = computed(() => routeId.value !== '');
|
const isEditing = computed(() => routeId.value !== '');
|
||||||
const isEventCreate = computed(() => route.name === 'event-item-new');
|
const isEventCreate = computed(() => route.name === 'event-item-new');
|
||||||
@@ -75,6 +86,76 @@ function errorText(error: unknown, fallback: string) {
|
|||||||
return error instanceof Error && error.message ? error.message : fallback;
|
return error instanceof Error && error.message ? error.message : fallback;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function readItemCreateDefaults(): ItemCreateDefaults {
|
||||||
|
if (typeof sessionStorage === 'undefined') {
|
||||||
|
return {
|
||||||
|
categoryId: '',
|
||||||
|
dyeable: false,
|
||||||
|
dualDyeable: false,
|
||||||
|
patternEditable: false,
|
||||||
|
noRecipe: false,
|
||||||
|
acquisitionMethodIds: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const rawValue = sessionStorage.getItem(itemCreateDefaultsStorageKey);
|
||||||
|
if (!rawValue) {
|
||||||
|
return {
|
||||||
|
categoryId: '',
|
||||||
|
dyeable: false,
|
||||||
|
dualDyeable: false,
|
||||||
|
patternEditable: false,
|
||||||
|
noRecipe: false,
|
||||||
|
acquisitionMethodIds: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedValue = JSON.parse(rawValue) as Partial<ItemCreateDefaults>;
|
||||||
|
return {
|
||||||
|
categoryId: typeof parsedValue.categoryId === 'string' ? parsedValue.categoryId : '',
|
||||||
|
dyeable: parsedValue.dyeable === true,
|
||||||
|
dualDyeable: parsedValue.dualDyeable === true,
|
||||||
|
patternEditable: parsedValue.patternEditable === true,
|
||||||
|
noRecipe: parsedValue.noRecipe === true,
|
||||||
|
acquisitionMethodIds: Array.isArray(parsedValue.acquisitionMethodIds)
|
||||||
|
? parsedValue.acquisitionMethodIds.filter((item) => typeof item === 'string')
|
||||||
|
: []
|
||||||
|
};
|
||||||
|
} catch {
|
||||||
|
return {
|
||||||
|
categoryId: '',
|
||||||
|
dyeable: false,
|
||||||
|
dualDyeable: false,
|
||||||
|
patternEditable: false,
|
||||||
|
noRecipe: false,
|
||||||
|
acquisitionMethodIds: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyItemCreateDefaults(isEventItem: boolean) {
|
||||||
|
const loadedOptions = options.value;
|
||||||
|
if (!loadedOptions) {
|
||||||
|
itemForm.value.isEventItem = isEventItem;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaults = readItemCreateDefaults();
|
||||||
|
const categoryIds = new Set(loadedOptions.itemCategories.map((item) => String(item.id)));
|
||||||
|
const methodIds = new Set(loadedOptions.acquisitionMethods.map((item) => String(item.id)));
|
||||||
|
itemForm.value = {
|
||||||
|
...itemForm.value,
|
||||||
|
categoryId: categoryIds.has(defaults.categoryId) ? defaults.categoryId : '',
|
||||||
|
dyeable: defaults.dyeable,
|
||||||
|
dualDyeable: defaults.dualDyeable,
|
||||||
|
patternEditable: defaults.patternEditable,
|
||||||
|
noRecipe: defaults.noRecipe,
|
||||||
|
isEventItem,
|
||||||
|
acquisitionMethodIds: defaults.acquisitionMethodIds.filter((item) => methodIds.has(item))
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
function closeEditor() {
|
function closeEditor() {
|
||||||
void router.push(cancelTo.value);
|
void router.push(cancelTo.value);
|
||||||
}
|
}
|
||||||
@@ -133,10 +214,8 @@ async function loadEditor() {
|
|||||||
currentImage.value = item.image;
|
currentImage.value = item.image;
|
||||||
imageHistory.value = item.imageHistory;
|
imageHistory.value = item.imageHistory;
|
||||||
hasRecipe.value = item.recipe !== null;
|
hasRecipe.value = item.recipe !== null;
|
||||||
} else if (isEventCreate.value) {
|
|
||||||
itemForm.value.isEventItem = true;
|
|
||||||
} else {
|
} else {
|
||||||
itemForm.value.isEventItem = false;
|
applyItemCreateDefaults(isEventCreate.value);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
message.value = errorText(error, t('errors.loadFailed'));
|
message.value = errorText(error, t('errors.loadFailed'));
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Icon } from '@iconify/vue';
|
import { Icon } from '@iconify/vue';
|
||||||
import { computed, onMounted, ref, watch } from 'vue';
|
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import EntityCard from '../components/EntityCard.vue';
|
import EntityCard from '../components/EntityCard.vue';
|
||||||
@@ -9,7 +9,7 @@ import PageHeader from '../components/PageHeader.vue';
|
|||||||
import Skeleton from '../components/Skeleton.vue';
|
import Skeleton from '../components/Skeleton.vue';
|
||||||
import Tabs, { type TabOption } from '../components/Tabs.vue';
|
import Tabs, { type TabOption } from '../components/Tabs.vue';
|
||||||
import TagsSelect from '../components/TagsSelect.vue';
|
import TagsSelect from '../components/TagsSelect.vue';
|
||||||
import { iconAdd, iconItem } from '../icons';
|
import { iconAdd, iconChevronDown, iconItem } from '../icons';
|
||||||
import { api, getAuthToken, type AuthUser, type Item, type Options } from '../services/api';
|
import { api, getAuthToken, type AuthUser, type Item, type Options } from '../services/api';
|
||||||
import ItemEdit from './ItemEdit.vue';
|
import ItemEdit from './ItemEdit.vue';
|
||||||
|
|
||||||
@@ -27,6 +27,30 @@ const search = ref('');
|
|||||||
const categoryId = ref('');
|
const categoryId = ref('');
|
||||||
const usageId = ref('');
|
const usageId = ref('');
|
||||||
const tagIds = ref<string[]>([]);
|
const tagIds = ref<string[]>([]);
|
||||||
|
const createDefaultsMenu = ref<HTMLElement | null>(null);
|
||||||
|
const createDefaultsOpen = ref(false);
|
||||||
|
|
||||||
|
type ItemCreateDefaults = {
|
||||||
|
categoryId: string;
|
||||||
|
dyeable: boolean;
|
||||||
|
dualDyeable: boolean;
|
||||||
|
patternEditable: boolean;
|
||||||
|
noRecipe: boolean;
|
||||||
|
acquisitionMethodIds: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemCreateDefaultsStorageKey = 'pokopia_item_create_defaults';
|
||||||
|
|
||||||
|
const emptyItemCreateDefaults = (): ItemCreateDefaults => ({
|
||||||
|
categoryId: '',
|
||||||
|
dyeable: false,
|
||||||
|
dualDyeable: false,
|
||||||
|
patternEditable: false,
|
||||||
|
noRecipe: false,
|
||||||
|
acquisitionMethodIds: []
|
||||||
|
});
|
||||||
|
|
||||||
|
const itemCreateDefaults = ref<ItemCreateDefaults>(readItemCreateDefaults());
|
||||||
|
|
||||||
const categorySkeletonWidths = ['64px', '92px', '78px', '104px', '86px'];
|
const categorySkeletonWidths = ['64px', '92px', '78px', '104px', '86px'];
|
||||||
const filterSkeletonWidths = ['52px', '48px', '48px'];
|
const filterSkeletonWidths = ['52px', '48px', '48px'];
|
||||||
@@ -50,11 +74,118 @@ const itemQuery = computed(() => ({
|
|||||||
}));
|
}));
|
||||||
const showEditor = computed(() => route.name === 'item-new' || route.name === 'event-item-new');
|
const showEditor = computed(() => route.name === 'item-new' || route.name === 'event-item-new');
|
||||||
const canCreateItem = computed(() => currentUser.value?.permissions.includes('items.create') === true);
|
const canCreateItem = computed(() => currentUser.value?.permissions.includes('items.create') === true);
|
||||||
|
const hasItemCreateDefaults = computed(
|
||||||
|
() =>
|
||||||
|
itemCreateDefaults.value.categoryId !== '' ||
|
||||||
|
itemCreateDefaults.value.dyeable ||
|
||||||
|
itemCreateDefaults.value.dualDyeable ||
|
||||||
|
itemCreateDefaults.value.patternEditable ||
|
||||||
|
itemCreateDefaults.value.noRecipe ||
|
||||||
|
itemCreateDefaults.value.acquisitionMethodIds.length > 0
|
||||||
|
);
|
||||||
|
|
||||||
function itemCardImage(item: Item) {
|
function itemCardImage(item: Item) {
|
||||||
return item.image ? { src: item.image.url, alt: t('media.imageAlt', { name: item.name }) } : undefined;
|
return item.image ? { src: item.image.url, alt: t('media.imageAlt', { name: item.name }) } : undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function readItemCreateDefaults(): ItemCreateDefaults {
|
||||||
|
if (typeof sessionStorage === 'undefined') {
|
||||||
|
return emptyItemCreateDefaults();
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const rawValue = sessionStorage.getItem(itemCreateDefaultsStorageKey);
|
||||||
|
if (!rawValue) {
|
||||||
|
return emptyItemCreateDefaults();
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedValue = JSON.parse(rawValue) as Partial<ItemCreateDefaults>;
|
||||||
|
return {
|
||||||
|
categoryId: typeof parsedValue.categoryId === 'string' ? parsedValue.categoryId : '',
|
||||||
|
dyeable: parsedValue.dyeable === true,
|
||||||
|
dualDyeable: parsedValue.dualDyeable === true,
|
||||||
|
patternEditable: parsedValue.patternEditable === true,
|
||||||
|
noRecipe: parsedValue.noRecipe === true,
|
||||||
|
acquisitionMethodIds: Array.isArray(parsedValue.acquisitionMethodIds)
|
||||||
|
? parsedValue.acquisitionMethodIds.filter((item) => typeof item === 'string')
|
||||||
|
: []
|
||||||
|
};
|
||||||
|
} catch {
|
||||||
|
return emptyItemCreateDefaults();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistItemCreateDefaults() {
|
||||||
|
if (typeof sessionStorage === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasItemCreateDefaults.value) {
|
||||||
|
sessionStorage.removeItem(itemCreateDefaultsStorageKey);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
sessionStorage.setItem(itemCreateDefaultsStorageKey, JSON.stringify(itemCreateDefaults.value));
|
||||||
|
}
|
||||||
|
|
||||||
|
function sanitizeItemCreateDefaults() {
|
||||||
|
if (!options.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const categoryIds = new Set(options.value.itemCategories.map((item) => String(item.id)));
|
||||||
|
const methodIds = new Set(options.value.acquisitionMethods.map((item) => String(item.id)));
|
||||||
|
const nextDefaults = {
|
||||||
|
...itemCreateDefaults.value,
|
||||||
|
categoryId: categoryIds.has(itemCreateDefaults.value.categoryId) ? itemCreateDefaults.value.categoryId : '',
|
||||||
|
acquisitionMethodIds: itemCreateDefaults.value.acquisitionMethodIds.filter((item) => methodIds.has(item))
|
||||||
|
};
|
||||||
|
|
||||||
|
itemCreateDefaults.value = nextDefaults;
|
||||||
|
}
|
||||||
|
|
||||||
|
function openCreateDefaultsMenu(event?: MouseEvent | KeyboardEvent) {
|
||||||
|
event?.preventDefault();
|
||||||
|
if (!options.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
createDefaultsOpen.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeCreateDefaultsMenu() {
|
||||||
|
createDefaultsOpen.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleCreateDefaultsMenu(event?: MouseEvent) {
|
||||||
|
event?.preventDefault();
|
||||||
|
if (createDefaultsOpen.value) {
|
||||||
|
closeCreateDefaultsMenu();
|
||||||
|
} else {
|
||||||
|
openCreateDefaultsMenu(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearItemCreateDefaults() {
|
||||||
|
itemCreateDefaults.value = emptyItemCreateDefaults();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCreateDefaultsDocumentPointerDown(event: PointerEvent) {
|
||||||
|
if (createDefaultsMenu.value && !createDefaultsMenu.value.contains(event.target as Node)) {
|
||||||
|
closeCreateDefaultsMenu();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCreateDefaultsKeydown(event: KeyboardEvent) {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
closeCreateDefaultsMenu();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10')) {
|
||||||
|
openCreateDefaultsMenu(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function loadItems() {
|
async function loadItems() {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
items.value = await api.items(itemQuery.value);
|
items.value = await api.items(itemQuery.value);
|
||||||
@@ -62,6 +193,7 @@ async function loadItems() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
document.addEventListener('pointerdown', onCreateDefaultsDocumentPointerDown);
|
||||||
if (getAuthToken()) {
|
if (getAuthToken()) {
|
||||||
try {
|
try {
|
||||||
currentUser.value = (await api.me()).user;
|
currentUser.value = (await api.me()).user;
|
||||||
@@ -70,10 +202,17 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
options.value = await api.options();
|
options.value = await api.options();
|
||||||
|
sanitizeItemCreateDefaults();
|
||||||
await loadItems();
|
await loadItems();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
document.removeEventListener('pointerdown', onCreateDefaultsDocumentPointerDown);
|
||||||
|
});
|
||||||
|
|
||||||
watch(itemQuery, loadItems);
|
watch(itemQuery, loadItems);
|
||||||
|
watch(itemCreateDefaults, persistItemCreateDefaults, { deep: true });
|
||||||
|
watch(showEditor, closeCreateDefaultsMenu);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -81,10 +220,76 @@ watch(itemQuery, loadItems);
|
|||||||
<PageHeader :title="pageTitle" :subtitle="pageSubtitle">
|
<PageHeader :title="pageTitle" :subtitle="pageSubtitle">
|
||||||
<template #kicker>{{ pageKicker }}</template>
|
<template #kicker>{{ pageKicker }}</template>
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<RouterLink v-if="canCreateItem" class="ui-button ui-button--primary ui-button--small" :to="createTarget">
|
<div v-if="canCreateItem" ref="createDefaultsMenu" class="item-create-action" @keydown="onCreateDefaultsKeydown">
|
||||||
<Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
|
<div class="item-create-action__control" :class="{ 'has-defaults': hasItemCreateDefaults }">
|
||||||
{{ t('common.add') }}
|
<RouterLink
|
||||||
</RouterLink>
|
class="ui-button ui-button--primary ui-button--small item-create-action__primary"
|
||||||
|
:to="createTarget"
|
||||||
|
:aria-label="t('pages.items.addItem')"
|
||||||
|
@contextmenu="openCreateDefaultsMenu"
|
||||||
|
>
|
||||||
|
<Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
|
||||||
|
{{ t('common.add') }}
|
||||||
|
</RouterLink>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="ui-button ui-button--primary ui-button--small item-create-action__menu-button"
|
||||||
|
:aria-label="t('pages.items.createDefaultsMenu')"
|
||||||
|
aria-haspopup="dialog"
|
||||||
|
:aria-controls="'item-create-defaults-menu'"
|
||||||
|
:aria-expanded="createDefaultsOpen"
|
||||||
|
:disabled="!options"
|
||||||
|
@click="toggleCreateDefaultsMenu"
|
||||||
|
@contextmenu="openCreateDefaultsMenu"
|
||||||
|
>
|
||||||
|
<Icon :icon="iconChevronDown" class="ui-icon" aria-hidden="true" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="createDefaultsOpen && options"
|
||||||
|
id="item-create-defaults-menu"
|
||||||
|
class="item-create-defaults-menu"
|
||||||
|
role="dialog"
|
||||||
|
:aria-label="t('pages.items.createDefaultsTitle')"
|
||||||
|
>
|
||||||
|
<div class="item-create-defaults-menu__header">
|
||||||
|
<strong>{{ t('pages.items.createDefaultsTitle') }}</strong>
|
||||||
|
<button type="button" class="plain-button ui-button--small" :disabled="!hasItemCreateDefaults" @click="clearItemCreateDefaults">
|
||||||
|
{{ t('pages.items.clearCreateDefaults') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="item-default-category">{{ t('pages.items.category') }}</label>
|
||||||
|
<TagsSelect
|
||||||
|
id="item-default-category"
|
||||||
|
v-model="itemCreateDefaults.categoryId"
|
||||||
|
:options="options.itemCategories"
|
||||||
|
:multiple="false"
|
||||||
|
:placeholder="t('common.none')"
|
||||||
|
:search-placeholder="t('pages.items.searchCategory')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="item-default-methods">{{ t('pages.items.acquisitionMethods') }}</label>
|
||||||
|
<TagsSelect
|
||||||
|
id="item-default-methods"
|
||||||
|
v-model="itemCreateDefaults.acquisitionMethodIds"
|
||||||
|
:options="options.acquisitionMethods"
|
||||||
|
:placeholder="t('pages.items.searchMethods')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
|
|
||||||
|
|||||||
@@ -703,6 +703,10 @@ export const systemWordingMessages = {
|
|||||||
relatedHabitats: 'Related habitats',
|
relatedHabitats: 'Related habitats',
|
||||||
pokemonDrops: 'Pokemon drops',
|
pokemonDrops: 'Pokemon drops',
|
||||||
createRecipe: 'Create recipe',
|
createRecipe: 'Create recipe',
|
||||||
|
addItem: 'Add item',
|
||||||
|
createDefaultsMenu: 'New item options',
|
||||||
|
createDefaultsTitle: 'Session defaults',
|
||||||
|
clearCreateDefaults: 'Clear defaults',
|
||||||
searchCategory: 'Search categories',
|
searchCategory: 'Search categories',
|
||||||
searchUsage: 'Search usages',
|
searchUsage: 'Search usages',
|
||||||
searchMethods: 'Search acquisition methods',
|
searchMethods: 'Search acquisition methods',
|
||||||
@@ -2034,6 +2038,10 @@ export const systemWordingMessages = {
|
|||||||
relatedHabitats: '相关栖息地',
|
relatedHabitats: '相关栖息地',
|
||||||
pokemonDrops: 'Pokemon 掉落',
|
pokemonDrops: 'Pokemon 掉落',
|
||||||
createRecipe: '创建材料单',
|
createRecipe: '创建材料单',
|
||||||
|
addItem: '新增物品',
|
||||||
|
createDefaultsMenu: '新增物品选项',
|
||||||
|
createDefaultsTitle: '当前会话默认值',
|
||||||
|
clearCreateDefaults: '清除默认值',
|
||||||
searchCategory: '搜索分类',
|
searchCategory: '搜索分类',
|
||||||
searchUsage: '搜索用途',
|
searchUsage: '搜索用途',
|
||||||
searchMethods: '搜索入手方式',
|
searchMethods: '搜索入手方式',
|
||||||
|
|||||||
Reference in New Issue
Block a user