feat(randomizer): add lora pool Vue widget

vue-widgets/src/components/lora-pool/sections/BaseModelSection.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="section">
+    <div class="section__header">
+      <span class="section__title">BASE MODEL</span>
+      <EditButton @click="$emit('edit')" />
+    </div>
+    <div class="section__content">
+      <div v-if="selected.length === 0" class="section__placeholder">
+        All models
+      </div>
+      <div v-else class="section__chips">
+        <FilterChip
+          v-for="name in selected"
+          :key="name"
+          :label="name"
+          :count="getCount(name)"
+          variant="neutral"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import FilterChip from '../shared/FilterChip.vue'
+import EditButton from '../shared/EditButton.vue'
+import type { BaseModelOption } from '../../../composables/types'
+
+const props = defineProps<{
+  selected: string[]
+  models: BaseModelOption[]
+}>()
+
+defineEmits<{
+  edit: []
+}>()
+
+const getCount = (name: string) => {
+  const model = props.models.find(m => m.name === name)
+  return model?.count
+}
+</script>
+
+<style scoped>
+.section {
+  margin-bottom: 16px;
+}
+
+.section__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.section__title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--fg-color, #fff);
+  opacity: 0.6;
+}
+
+.section__content {
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+}
+
+.section__placeholder {
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--comfy-input-bg, #333);
+  border-radius: 4px;
+  font-size: 12px;
+  color: var(--fg-color, #fff);
+  opacity: 0.5;
+  text-align: center;
+}
+
+.section__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+</style>