From 5113228bc8b1bf5d2a3438c6c48f7c087b3bba26 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 2 Nov 2025 17:13:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96pagetype=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=E5=9F=BA=E7=A1=80=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=88=97=E8=A1=A8=E9=A1=B5=E5=B7=A5=E5=85=B7=E6=A0=8F?=
 =?UTF-8?q?=E4=B8=A4=E7=A7=8D=E8=A6=86=E7=9B=96=E6=8E=A5=E5=8F=A3props?=
 =?UTF-8?q?=E5=92=8Ccontext?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/core/pagetype/GenericListPage.vue     |  12 +-
 .../local_ai_node_list_toolbar.vue            | 340 ++++++++++++++++++
 2 files changed, 351 insertions(+), 1 deletion(-)
 create mode 100644 apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_toolbar.vue

diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
index f383ffb..f5be5e5 100644
--- a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
+++ b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
@@ -10,7 +10,7 @@
         <h2>{{ t(title) }}</h2>
       </div>
       <div class="header-right">
-        <!-- 工具栏覆盖组件 -->
+        <!-- 工具栏覆盖组件 - 支持两种接口：context 或 props -->
         <component
           v-if="toolbarComponent"
           :is="toolbarComponent"
@@ -28,6 +28,16 @@
             router,
             t
           }"
+          :entity="entity"
+          :search-query="searchQuery"
+          :view-mode="viewMode"
+          :selected-keys="selectedKeys"
+          :loading="loading"
+          @update:search-query="searchQuery = $event"
+          @update:view-mode="viewMode = $event"
+          @reload="reload"
+          @create="createRecordHandler"
+          @delete-selected="handleDeleteSelected"
         />
         <GenericListPageToolBar
           v-else
diff --git a/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_toolbar.vue b/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_toolbar.vue
new file mode 100644
index 0000000..7ac4d51
--- /dev/null
+++ b/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_toolbar.vue
@@ -0,0 +1,340 @@
+<template>
+  <div class="toolbar">
+    <div class="filters">
+      <n-input 
+        v-model:value="searchQueryModel" 
+        :placeholder="t('Search')" 
+        clearable 
+        style="width: 200px" 
+      />
+    </div>
+    <div class="view-toggle">
+      <button 
+        class="toggle-btn" 
+        :class="{ active: viewModeModel === 'list' }"
+        @click="viewModeModel = 'list'"
+        :title="t('List View')"
+      >
+        <i class="fa fa-list"></i>
+      </button>
+      <button 
+        class="toggle-btn" 
+        :class="{ active: viewModeModel === 'card' }"
+        @click="viewModeModel = 'card'"
+        :title="t('Card View')"
+      >
+        <i class="fa fa-th-large"></i>
+      </button>
+    </div>
+    <button class="refresh-btn" @click="reload" :disabled="loading">
+      <i :class="loading ? 'fa fa-spinner fa-spin' : 'fa fa-refresh'"></i>
+    </button>
+    <n-dropdown
+      trigger="click"
+      :options="menuOptions"
+      @select="onMenuSelect"
+    >
+      <button class="refresh-btn" :disabled="loading || importing" :title="t('More')">
+        <i :class="importing ? 'fa fa-ellipsis-h fa-spin' : 'fa fa-ellipsis-h'"></i>
+      </button>
+    </n-dropdown>
+    <button 
+      v-if="selectedKeys.length === 0"
+      class="create-btn" 
+      @click="createRecordHandler"
+      :disabled="loading"
+    >
+      <i class="fa fa-plus"></i>
+      {{ t('Create') }}
+    </button>
+    <button 
+      v-else
+      class="delete-btn" 
+      @click="handleDeleteSelected" 
+      :disabled="loading"
+    >
+      <i class="fa fa-trash"></i>
+      {{ t('Delete Selected') }} ({{ selectedKeys.length }})
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { NInput, NDropdown, useDialog } from 'naive-ui'
+import { t } from '@/shared/i18n'
+import { importLocalNodes } from '@/shared/api/nodes'
+
+interface Props {
+  entity: string
+  searchQuery: string
+  viewMode: 'card' | 'list'
+  selectedKeys: string[]
+  loading: boolean
+}
+
+interface Emits {
+  (e: 'update:searchQuery', value: string): void
+  (e: 'update:viewMode', value: 'card' | 'list'): void
+  (e: 'reload'): void
+  (e: 'create'): void
+  (e: 'delete-selected'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const dialog = useDialog()
+const importing = ref(false)
+
+// 使用 computed 来处理双向绑定
+const searchQueryModel = computed({
+  get: () => props.searchQuery,
+  set: (value) => emit('update:searchQuery', value)
+})
+
+const viewModeModel = computed({
+  get: () => props.viewMode,
+  set: (value) => emit('update:viewMode', value)
+})
+
+function reload() {
+  emit('reload')
+}
+
+function createRecordHandler() {
+  emit('create')
+}
+
+function handleDeleteSelected() {
+  emit('delete-selected')
+}
+
+// 顶部菜单
+const menuOptions = computed(() => [
+  { label: t('Import local nodes'), key: 'import-local-nodes' }
+])
+
+function onMenuSelect(key: string) {
+  if (key === 'import-local-nodes') {
+    handleImportLocalNodes()
+  }
+}
+
+// 一键导入本地节点
+async function handleImportLocalNodes() {
+  if (importing.value) return
+  importing.value = true
+  try {
+    const res = await importLocalNodes()
+    emit('reload')
+    if (!res?.success) {
+      dialog.error({ title: t('Error'), content: t('Import failed') })
+      return
+    }
+    const matchedCount = res.matched || 0
+    const importedCount = res.imported || 0
+    const skippedExisting = res.skipped_existing || 0
+    if (matchedCount === 0) {
+      dialog.info({ title: t('Info'), content: t('No local node definitions found') })
+    } else if (importedCount === 0 && skippedExisting > 0) {
+      dialog.info({ title: t('Info'), content: t('All local nodes already exist') })
+    } else if (importedCount > 0) {
+      dialog.success({ title: t('Success'), content: `${t('Imported')} ${importedCount} ${t('nodes')}` })
+    } else {
+      dialog.info({ title: t('Info'), content: t('No new local nodes found') })
+    }
+  } catch (e) {
+    console.error('Import local nodes error:', e)
+    dialog.error({ title: t('Error'), content: t('Import failed') })
+  } finally {
+    importing.value = false
+  }
+}
+</script>
+
+<style scoped>
+.toolbar { 
+  display: flex; 
+  align-items: center; 
+  gap: 12px; 
+}
+
+.filters { 
+  display: flex; 
+  gap: 8px; 
+  align-items: center; 
+}
+
+/* 视图切换按钮 */
+.view-toggle { 
+  display: flex; 
+  background: #f8fafc; 
+  border-radius: 8px; 
+  padding: 2px; 
+  border: 1px solid #e2e8f0; 
+}
+
+/* 切换按钮 - 使用灰色系 */
+.toggle-btn { 
+  width: 32px; 
+  height: 32px; 
+  border: none; 
+  background: transparent; 
+  color: #6b7280; 
+  cursor: pointer; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  border-radius: 6px; 
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
+}
+
+.toggle-btn:hover { 
+  background: #f1f5f9; 
+  color: #475569; 
+}
+
+.toggle-btn.active { 
+  background: #e2e8f0; 
+  color: #1e293b; 
+}
+
+/* 刷新按钮 */
+.refresh-btn {
+  width: 36px; 
+  height: 36px; 
+  border: none; 
+  border-radius: 8px; 
+  background: #f8fafc;
+  color: #64748b; 
+  cursor: pointer; 
+  display: flex; 
+  align-items: center;
+  justify-content: center; 
+  font-size: 14px; 
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative; 
+  overflow: hidden;
+}
+
+.refresh-btn:hover { 
+  background: #e2e8f0; 
+  color: #475569; 
+  transform: translateY(-1px); 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
+}
+
+.refresh-btn:active { 
+  transform: translateY(0); 
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
+}
+
+.refresh-btn:disabled { 
+  opacity: 0.6; 
+  cursor: not-allowed; 
+  transform: none; 
+  box-shadow: none; 
+}
+
+.refresh-btn:disabled:hover { 
+  background: #f8fafc; 
+  color: #64748b; 
+  transform: none; 
+  box-shadow: none; 
+}
+
+/* 新建按钮 - 使用柔和的品牌色系，与整体风格协调 */
+.create-btn {
+  height: 36px; 
+  padding: 0 16px; 
+  border: 1px solid #1fc76f; 
+  border-radius: 8px; 
+  background: #e6f8f0;
+  color: #0d684b; 
+  cursor: pointer; 
+  display: flex; 
+  align-items: center; 
+  gap: 6px;
+  font-size: 14px; 
+  font-weight: 500; 
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative; 
+  overflow: hidden;
+}
+
+.create-btn:hover { 
+  background: #dcfce7; 
+  border-color: #1fc76f;
+  color: #166534; 
+  transform: translateY(-1px); 
+  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15); 
+}
+
+.create-btn:active { 
+  background: #1fc76f; 
+  border-color: #1fc76f;
+  color: white;
+  transform: translateY(0); 
+  box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2); 
+}
+
+.create-btn:disabled { 
+  background: #f1f5f9; 
+  border-color: #e2e8f0;
+  color: #94a3b8; 
+  opacity: 0.6; 
+  cursor: not-allowed; 
+  transform: none; 
+  box-shadow: none; 
+}
+
+.create-btn:disabled:hover { 
+  background: #f1f5f9; 
+  border-color: #e2e8f0;
+  color: #94a3b8; 
+  transform: none; 
+  box-shadow: none; 
+}
+
+.create-btn i { 
+  font-size: 12px; 
+}
+
+/* 删除选中按钮 */
+.delete-btn {
+  background: #ef4444; 
+  color: white; 
+  border: none; 
+  padding: 8px 16px; 
+  border-radius: 6px;
+  cursor: pointer; 
+  font-size: 14px; 
+  font-weight: 500; 
+  display: flex; 
+  align-items: center;
+  gap: 6px; 
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
+  position: relative; 
+  overflow: hidden;
+}
+
+.delete-btn:hover { 
+  background: #dc2626; 
+  transform: translateY(-1px); 
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); 
+}
+
+.delete-btn:active { 
+  transform: translateY(0); 
+  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3); 
+}
+
+.delete-btn:disabled { 
+  opacity: 0.5; 
+  cursor: not-allowed; 
+}
+
+.delete-btn i { 
+  font-size: 12px; 
+}
+</style>
\ No newline at end of file