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.
2026-05-04 22:45:32 +08:00
parent cd0f8868c3
commit a17344d216
5 changed files with 392 additions and 9 deletions
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -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 展示。
 - 物品列表移动端保持常规卡片布局，展示物品图标、名称和分类。
 - 物品列表不展示标签、入手方式或编辑元信息。
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -1346,6 +1346,96 @@ button:disabled,
  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,
 .toolbar {
  display: grid;
--- a/frontend/src/views/ItemEdit.vue
+++ b/frontend/src/views/ItemEdit.vue
@@ -51,6 +51,17 @@ const itemForm = ref({
  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 isEditing = computed(() => routeId.value !== '');
 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;
 }

+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() {
  void router.push(cancelTo.value);
 }
@@ -133,10 +214,8 @@ async function loadEditor() {
      currentImage.value = item.image;
      imageHistory.value = item.imageHistory;
      hasRecipe.value = item.recipe !== null;
-    } else if (isEventCreate.value) {
-      itemForm.value.isEventItem = true;
    } else {
-      itemForm.value.isEventItem = false;
+      applyItemCreateDefaults(isEventCreate.value);
    }
  } catch (error) {
    message.value = errorText(error, t('errors.loadFailed'));
--- a/frontend/src/views/ItemsList.vue
+++ b/frontend/src/views/ItemsList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 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 { useRoute } from 'vue-router';
 import EntityCard from '../components/EntityCard.vue';
@@ -9,7 +9,7 @@ import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
 import Tabs, { type TabOption } from '../components/Tabs.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 ItemEdit from './ItemEdit.vue';

@@ -27,6 +27,30 @@ const search = ref('');
 const categoryId = ref('');
 const usageId = ref('');
 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 filterSkeletonWidths = ['52px', '48px', '48px'];
@@ -50,11 +74,118 @@ const itemQuery = computed(() => ({
 }));
 const showEditor = computed(() => route.name === 'item-new' || route.name === 'event-item-new');
 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) {
  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() {
  loading.value = true;
  items.value = await api.items(itemQuery.value);
@@ -62,6 +193,7 @@ async function loadItems() {
 }

 onMounted(async () => {
+  document.addEventListener('pointerdown', onCreateDefaultsDocumentPointerDown);
  if (getAuthToken()) {
    try {
      currentUser.value = (await api.me()).user;
@@ -70,10 +202,17 @@ onMounted(async () => {
    }
  }
  options.value = await api.options();
+  sanitizeItemCreateDefaults();
  await loadItems();
 });

+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onCreateDefaultsDocumentPointerDown);
+});
+
 watch(itemQuery, loadItems);
+watch(itemCreateDefaults, persistItemCreateDefaults, { deep: true });
+watch(showEditor, closeCreateDefaultsMenu);
 </script>

 <template>
@@ -81,10 +220,76 @@ watch(itemQuery, loadItems);
    <PageHeader :title="pageTitle" :subtitle="pageSubtitle">
      <template #kicker>{{ pageKicker }}</template>
      <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">
+          <div class="item-create-action__control" :class="{ 'has-defaults': hasItemCreateDefaults }">
+            <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>
    </PageHeader>

--- a/system-wordings.ts
+++ b/system-wordings.ts
@@ -703,6 +703,10 @@ export const systemWordingMessages = {
        relatedHabitats: 'Related habitats',
        pokemonDrops: 'Pokemon drops',
        createRecipe: 'Create recipe',
+        addItem: 'Add item',
+        createDefaultsMenu: 'New item options',
+        createDefaultsTitle: 'Session defaults',
+        clearCreateDefaults: 'Clear defaults',
        searchCategory: 'Search categories',
        searchUsage: 'Search usages',
        searchMethods: 'Search acquisition methods',
@@ -2034,6 +2038,10 @@ export const systemWordingMessages = {
        relatedHabitats: '相关栖息地',
        pokemonDrops: 'Pokemon 掉落',
        createRecipe: '创建材料单',
+        addItem: '新增物品',
+        createDefaultsMenu: '新增物品选项',
+        createDefaultsTitle: '当前会话默认值',
+        clearCreateDefaults: '清除默认值',
        searchCategory: '搜索分类',
        searchUsage: '搜索用途',
        searchMethods: '搜索入手方式',