From 6a4323df7770090b0f8ffffc37b6b78d943fce6b Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Fri, 5 Dec 2025 07:31:14 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E7=B4=A2=E5=BC=95=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=B7=BB=E5=8A=A0=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为索引按钮添加动画，在索引过程中使用动画表示进度
---
 src/meilisearch_module/meili-index.vue | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/meilisearch_module/meili-index.vue b/src/meilisearch_module/meili-index.vue
index de57d05..58fad1a 100644
--- a/src/meilisearch_module/meili-index.vue
+++ b/src/meilisearch_module/meili-index.vue
@@ -16,8 +16,8 @@
 		</template>
 
 		<template #actions>
-			<v-button xSmall color="primary" @click="handleReindexAll">
-				一键重建
+			<v-button :disabled="reindexingAll" xSmall color="primary" @click="handleReindexAll">
+				<span>一键重建</span>
 			</v-button>
 		</template>
 
@@ -29,7 +29,7 @@
 				</template>"
 
 				<template #item.actions="{ item }">
-					<v-button xSmall @click="handleReindex(item)">刷新索引</v-button>
+					<v-button :disabled="reindexing[item.id]" xSmall @click="handleReindex(item)">刷新索引</v-button>
 				</template>
 			</v-table>
 		</section>
@@ -40,9 +40,10 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useApi } from '@directus/extensions-sdk';
+import type { MeiliIndexConfig } from '../types/meilisearch';
 
 const api = useApi();
-const configs = ref([]);
+const configs = ref<MeiliIndexConfig[]>([]);
 const headers = [
 	{ text: '集合名称', value: 'collection_name' },
 	{ text: '索引名称', value: 'index_name' },
@@ -50,28 +51,40 @@ const headers = [
 	{ text: '操作', value: 'actions', sortable: false },
 ];
 
+const reindexingAll = ref(false);
+const reindexing = ref<Record<string, boolean>>({});
+
 const fetchConfigs = async () => {
-	const resp = await api.get('/items/meili_index_configs', { params: { limit: -1 } });
+	const resp = await api.get<{ data: MeiliIndexConfig[] }>('/items/meili_index_configs', { params: { limit: -1 } });
+	console.log(resp)
 	configs.value = resp.data.data;
+
+	reindexing.value = Object.fromEntries(configs.value.map(c => [c.id, false]));
 }
 
 const handleReindexAll = async () => {
 	try {
+		reindexingAll.value = true;
 		await api.post('/meilisearch/reindex');
 		console.log('Reindexing all started successfully');
 	} catch (error) {
 		console.error('Reindexing all failed:', error);
+	} finally {
+		reindexingAll.value = false;
 	}
 }
 
-const handleReindex = async (item: any) => {
+const handleReindex = async (item: MeiliIndexConfig) => {
 	if (!item.enabled) return;
 	const configId = item.id;
 	try {
+		reindexing.value[configId] = true;
 		await api.post(`/meilisearch/reindex/${configId}`);
 		console.log('Reindexing started successfully');
 	} catch (error) {
 		console.error('Reindexing failed:', error);
+	} finally {
+		reindexing.value[configId] = false;
 	}
 
 };