Files
directus-extensions-meili-sync/src/meilisearch_module/meili-index.vue
R2m1liA 19aa6886bd feat(module): 添加新页面
- 增添meili-config页面用于配置melisearch
- 将原先的module.vue改为meili-index.vue,页面逻辑不变
2025-10-21 08:53:36 +00:00

68 lines
1.6 KiB
Vue

<template>
<private-view title="Meili Sync">
<template #title-outer:prepend>
<v-icon name="feature_search" />
</template>
<template #navigation>
<v-list nav :model-value="selected" dense>
<v-list-item to="/meilisearch" exact>
索引配置
</v-list-item>
<v-list-item to="/meilisearch/config">
MeiliSearch 配置
</v-list-item>
</v-list>
</template>
<section>
<v-notice type="info">请选择希望被 MeiliSearch 索引的集合</v-notice>
<v-table :headers="headers" :items="collections" :items-per-page="10" class="mt-4">
<template #item.enabled="{ item }">
<v-checkbox v-model="item.enabled" :label="item.enabled ? '已启用' : '未启用'" />
</template>"
</v-table>
</section>
</private-view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useApi } from '@directus/extensions-sdk';
const api = useApi();
const collections = ref([]);
const headers = [
{ text: '集合名称', value: 'collection' },
{ text: '说明', value: 'note' },
{ text: '启用索引', value: 'enabled' },
];
// const fetchConfigs = async () => {
// const resp = await api.get('/items/meili_index_configs', { params: { limit: -1 } });
// configs.value = resp.data.data;
// }
const fetchCollections = async () => {
const resp = await api.get('/meilisearch/collections');
collections.value = resp.data.map((col: any) => ({
...col,
enabled: false,
}));
};
const selected = ref(null);
onMounted(() => {
fetchCollections();
// fetchConfigs();
})
</script>
<style scoped>
section {
padding: 0 var(--content-padding);
}
</style>