MyHomepage/frontend/src/components/CategoryForm.vue

<script setup lang="ts">
/**
 * CategoryForm：分类增 / 改表单。
 * P23：图标字段右侧新增「选择」按钮，弹出 AppIconPicker 网格选择器
 */
import { ref, watch } from 'vue';
import { useCategoriesStore } from '@/stores/categories';
import AppModal from './AppModal.vue';
import AppButton from './AppButton.vue';
import AppIcon from './AppIcon.vue';
import AppIconPicker from './AppIconPicker.vue';
import type { Category } from '@/types/api';

interface Props {
  category: Category | null;
  defaultParentId: number;
}
const props = defineProps<Props>();
const emit = defineEmits<{ (e: 'close'): void }>();

const categories = useCategoriesStore();
const form = ref({
  parentId: props.category?.parentId ?? props.defaultParentId,
  name: props.category?.name ?? '',
  icon: props.category?.icon ?? 'layers',
  sort: props.category?.sort ?? 0
});

watch(() => props.category, (c) => {
  form.value = {
    parentId: c?.parentId ?? props.defaultParentId,
    name: c?.name ?? '',
    icon: c?.icon ?? 'layers',
    sort: c?.sort ?? 0
  };
});

// P23：图标选择器
const iconPickerOpen = ref(false);
function onIconPick(name: string) {
  form.value.icon = name;
}

const saving = ref(false);
async function save() {
  if (!form.value.name.trim()) return;
  saving.value = true;
  try {
    const payload = { ...form.value, sort: Number(form.value.sort) || 0 };
    if (props.category) {
      await categories.update(props.category.id, payload);
    } else {
      await categories.create(payload);
    }
    emit('close');
  } finally {
    saving.value = false;
  }
}
</script>

<template>
  <AppModal :model-value="true" :title="category ? '编辑分类' : '新建分类'" size="sm" @update:model-value="emit('close')">
    <div class="form">
      <label class="form__row">
        <span class="form__label">父分类</span>
        <select v-model.number="form.parentId" class="form__input" :disabled="!!category">
          <option :value="0">— 顶级分类 —</option>
          <option v-for="c in categories.tree" :key="c.id" :value="c.id">{{ c.name }}</option>
        </select>
      </label>

      <label class="form__row">
        <span class="form__label">名称</span>
        <input v-model="form.name" class="form__input" placeholder="分类名" />
      </label>

      <div class="form__row">
        <span class="form__label">图标</span>
        <div class="form__icon-row">
          <div class="form__icon-preview">
            <AppIcon :name="form.icon || 'layers'" :size="28" />
          </div>
          <input v-model="form.icon" class="form__input" placeholder="lucide 名，如 layers / bot" />
          <AppButton size="sm" variant="ghost" type="button" @click="iconPickerOpen = true" title="从图标库选择">
            <AppIcon name="layout-grid" :size="14" /> 选择
          </AppButton>
        </div>
      </div>

      <label class="form__row">
        <span class="form__label">排序</span>
        <input v-model.number="form.sort" type="number" class="form__input" />
      </label>
    </div>

    <template #footer>
      <AppButton variant="text" @click="emit('close')">取消</AppButton>
      <AppButton variant="primary" :loading="saving" @click="save">保存</AppButton>
    </template>
  </AppModal>

  <AppIconPicker v-model="iconPickerOpen" :selected="form.icon" @select="onIconPick" />
</template>

<style scoped>
.form { display: flex; flex-direction: column; gap: 14px; }
.form__row { display: flex; flex-direction: column; gap: 6px; }
.form__label { font-size: var(--font-sm); color: var(--color-text-muted); }
.form__input {
  width: 100%;
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  outline: none;
  font-size: var(--font-sm);
  transition: border-color var(--duration-fast) var(--ease);
}
.form__input:focus { border-color: var(--color-accent); }
.form__input:disabled { opacity: .6; }
.form__icon-row { display: flex; align-items: center; gap: 8px; }
.form__icon-preview {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.form__icon-row .form__input { flex: 1; }
</style>