feat: updated spider data tab

src/components/core/database/DatabaseDataSource.vue

@@ -4,6 +4,7 @@ import { translate } from '@/utils';
 
 const props = defineProps<{
   dataSource?: DatabaseDataSource;
+  iconOnly?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -106,11 +107,16 @@ defineOptions({ name: 'ClDatabaseDataSource' });
 </script>
 
 <template>
-  <cl-tag
-    :icon="data.icon"
-    :label="data.label"
-    :tooltip="data.tooltip"
-    :type="data.type"
-    @click="emit('click')"
-  />
+  <template v-if="iconOnly">
+    <cl-icon :icon="data.icon" @click="emit('click')" />
+  </template>
+  <template v-else>
+    <cl-tag
+      :icon="data.icon"
+      :label="data.label"
+      :tooltip="data.tooltip"
+      :type="data.type"
+      @click="emit('click')"
+    />
+  </template>
 </template>

src/components/core/database/DatabaseTableDetail.vue

@@ -205,33 +205,18 @@ defineOptions({ name: 'ClDatabaseTableDetail' });
 
 <template>
   <div class="database-table-detail">
-    <cl-nav-tabs
-      :active-key="activeTabName"
-      :items="tabsItems"
-      @select="(key: string) => (activeTabName = key)"
-    >
-      <template #extra>
-        <div class="nav-tabs-actions">
-          <cl-fa-icon-button
-            type="primary"
-            :icon="['fa', 'save']"
-            :tooltip="t('components.database.actions.commitChanges')"
-            size="small"
-            :disabled="!canSave"
-            :loading="commitLoading"
-            @click.stop="onCommit"
-          />
-          <cl-fa-icon-button
-            type="info"
-            :icon="['fa', 'rotate-left']"
-            :tooltip="t('components.database.actions.rollbackChanges')"
-            size="small"
-            :disabled="!hasChanges"
-            @click.stop="onRollback"
-          />
-        </div>
-      </template>
-    </cl-nav-tabs>
+    <!-- Nav Tabs -->
+    <cl-database-nav-tabs
+      v-model="activeTabName"
+      :tabs-items="tabsItems"
+      :can-save="canSave"
+      :has-changes="hasChanges"
+      :commit-loading="commitLoading"
+      @commit="onCommit"
+      @rollback="onRollback"
+    />
+
+    <!-- Tab Content -->
     <div class="tab-content">
       <template v-if="activeTabName === TAB_NAME_DATA">
         <cl-database-table-detail-data

src/components/core/database/nav/DatabaseNavTabs.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { translate } from '@/utils';
+
+const activeTabName = defineModel();
+
+defineProps<{
+  tabsItems: NavItem[];
+  canSave?: boolean;
+  hasChanges?: boolean;
+  commitLoading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'commit'): void;
+  (e: 'rollback'): void;
+}>();
+
+const t = translate;
+defineOptions({ name: 'ClDatabaseNavTabs' });
+</script>
+
+<template>
+  <cl-nav-tabs
+    :active-key="activeTabName"
+    :items="tabsItems"
+    @select="(key: string) => (activeTabName = key)"
+  >
+    <template #extra>
+      <div class="nav-tabs-actions">
+        <cl-fa-icon-button
+          type="primary"
+          :icon="['fa', 'save']"
+          :tooltip="t('components.database.actions.commitChanges')"
+          size="small"
+          :disabled="!canSave"
+          :loading="commitLoading"
+          @click.stop="emit('commit')"
+        />
+        <cl-fa-icon-button
+          type="info"
+          :icon="['fa', 'rotate-left']"
+          :tooltip="t('components.database.actions.rollbackChanges')"
+          size="small"
+          :disabled="!hasChanges"
+          @click.stop="emit('rollback')"
+        />
+      </div>
+    </template>
+  </cl-nav-tabs>
+</template>

src/components/core/database/tables/DatabaseTableDetailData.vue

@@ -12,11 +12,12 @@ const props = defineProps<{
   activeTable?: DatabaseTable;
   activeId?: string;
   databaseName?: string;
+  filter?: { [key: string]: any };
 }>();
 
 const t = translate;
 
-const { getList, post } = useRequest();
+const { post } = useRequest();
 
 const tableRef = ref<typeof ClEditTable | null>(null);
 
@@ -114,12 +115,16 @@ const originalTableDataMap = computed(() => {
 });
 
 const getTableData = async () => {
-  const res = await getList(`/databases/${props.activeId}/tables/data`, {
-    database: props.databaseName,
-    table: props.activeTable?.name,
-    page: tablePagination.value.page,
-    size: tablePagination.value.size,
-  });
+  const res = await post<any, Promise<ResponseWithListData>>(
+    `/databases/${props.activeId}/tables/data/get`,
+    {
+      database: props.databaseName,
+      table: props.activeTable?.name,
+      filter: props.filter,
+      page: tablePagination.value.page,
+      size: tablePagination.value.size,
+    }
+  );
   originalTableData.value =
     res.data?.map(row => {
       return { ...row, __hash__: getRowHash(row) };

src/components/core/database/useDatabase.ts

@@ -2,7 +2,12 @@ import { computed } from 'vue';
 import { Store } from 'vuex';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import useDatabaseService from '@/services/database/databaseService';
-import { getDefaultFormComponentData, plainClone, translate } from '@/utils';
+import {
+  EMPTY_OBJECT_ID,
+  getDefaultFormComponentData,
+  plainClone,
+  translate,
+} from '@/utils';
 import useForm from '@/components/ui/form/useForm';
 import { databaseDefaults } from '@/utils/database';
 
@@ -67,10 +72,21 @@ export const useDatabase = (store: Store<RootStoreState>) => {
     store.commit(`${ns}/setForm`, { ...form });
   };
 
+  const allListSelectOptions = computed<SelectOption[]>(
+    () =>
+      store.getters[`${ns}/allListSelectOptions`]?.map((op: SelectOption) => {
+        if (op.value === EMPTY_OBJECT_ID) {
+          return { ...op, label: t('components.database.default.name') };
+        }
+        return op;
+      }) || []
+  );
+
   return {
     ...useForm(ns, store, useDatabaseService(store), formComponentData),
     formRules,
     dataSourceOptions,
+    allListSelectOptions,
     getTypeOptionsWithDefault,
     onChangePasswordFunc,
     onHostsAdd,

src/components/index.ts

@@ -1,11 +1,12 @@
 import CreateEditDatabaseDialog from './core/database/CreateEditDatabaseDialog.vue';
 import CreateEditDatabaseTableDialog from './core/database/CreateEditDatabaseTableDialog.vue';
-import DatabaseDataSource from './core/database/DatabaseDataSource.vue';
 import DatabaseDatabaseDetail from './core/database/DatabaseDatabaseDetail.vue';
+import DatabaseDataSource from './core/database/DatabaseDataSource.vue';
 import DatabaseForm from './core/database/DatabaseForm.vue';
 import DatabaseSidebar from './core/database/DatabaseSidebar.vue';
 import DatabaseStatus from './core/database/DatabaseStatus.vue';
 import DatabaseTableDetail from './core/database/DatabaseTableDetail.vue';
+import DatabaseNavTabs from './core/database/nav/DatabaseNavTabs.vue';
 import DatabaseTableDetailColumns from './core/database/tables/DatabaseTableDetailColumns.vue';
 import DatabaseTableDetailData from './core/database/tables/DatabaseTableDetailData.vue';
 import DatabaseTableDetailIndexes from './core/database/tables/DatabaseTableDetailIndexes.vue';
@@ -86,10 +87,10 @@ import Chart from './ui/chart/Chart.vue';
 import Metric from './ui/chart/Metric.vue';
 import ContextMenu from './ui/context-menu/ContextMenu.vue';
 import ContextMenuList from './ui/context-menu/ContextMenuList.vue';
+import * as date from './ui/date/date';
 import DateRangePicker from './ui/date/DateRangePicker.vue';
 import DateTimeRangePicker from './ui/date/DateTimeRangePicker.vue';
 import RangePicker from './ui/date/RangePicker.vue';
-import * as date from './ui/date/date';
 import ConfirmDialog from './ui/dialog/ConfirmDialog.vue';
 import CreateEditDialog from './ui/dialog/CreateEditDialog.vue';
 import Dialog from './ui/dialog/Dialog.vue';
@@ -103,6 +104,7 @@ import FileActions from './ui/file/FileActions.vue';
 import FileDiff from './ui/file/FileDiff.vue';
 import FileEditor from './ui/file/FileEditor.vue';
 import FileEditorCreateWithAiDialog from './ui/file/FileEditorCreateWithAiDialog.vue';
+import * as fileEditorDropZone from './ui/file/fileEditorDropZone';
 import FileEditorNavMenu from './ui/file/FileEditorNavMenu.vue';
 import FileEditorNavMenuContextMenu from './ui/file/FileEditorNavMenuContextMenu.vue';
 import FileEditorNavTabs from './ui/file/FileEditorNavTabs.vue';
@@ -112,23 +114,21 @@ import FileEditorSettingsDialog from './ui/file/FileEditorSettingsDialog.vue';
 import FileTab from './ui/file/FileTab.vue';
 import FileUpload from './ui/file/FileUpload.vue';
 import UploadFilesDialog from './ui/file/UploadFilesDialog.vue';
-import * as fileEditorDropZone from './ui/file/fileEditorDropZone';
+import * as filter from './ui/filter/filter';
 import FilterCondition from './ui/filter/FilterCondition.vue';
 import FilterConditionList from './ui/filter/FilterConditionList.vue';
 import FilterInput from './ui/filter/FilterInput.vue';
 import FilterSelect from './ui/filter/FilterSelect.vue';
-import * as filter from './ui/filter/filter';
 import Form from './ui/form/Form.vue';
 import FormItem from './ui/form/FormItem.vue';
-import FormTableField from './ui/form/FormTableField.vue';
 import * as formTable from './ui/form/formTable';
+import FormTableField from './ui/form/FormTableField.vue';
 import useForm from './ui/form/useForm';
 import AtomMaterialIcon from './ui/icon/AtomMaterialIcon.vue';
+import * as icon from './ui/icon/icon';
 import Icon from './ui/icon/Icon.vue';
 import MenuItemIcon from './ui/icon/MenuItemIcon.vue';
-import * as icon from './ui/icon/icon';
 import InputList from './ui/input/InputList.vue';
-import LexicalEditor from './ui/lexical/LexicalEditor.vue';
 import BlockOptionsDropdownList from './ui/lexical/components/BlockOptionsDropdownList.vue';
 import DropdownButton from './ui/lexical/components/DropdownButton.vue';
 import FloatLinkEditor from './ui/lexical/components/FloatLinkEditor.vue';
@@ -144,6 +144,7 @@ import useLexicalList from './ui/lexical/composables/useLexicalList';
 import useLexicalMounted from './ui/lexical/composables/useLexicalMounted';
 import useRichTextSetup from './ui/lexical/composables/useRichTextSetup';
 import useVariableSetup from './ui/lexical/composables/useVariableSetup';
+import LexicalEditor from './ui/lexical/LexicalEditor.vue';
 import * as ImageNode from './ui/lexical/nodes/ImageNode';
 import * as VariableNode from './ui/lexical/nodes/VariableNode';
 import LexicalAutoFocusPlugin from './ui/lexical/plugins/LexicalAutoFocusPlugin.vue';
@@ -181,8 +182,14 @@ import NavTabs from './ui/nav/NavTabs.vue';
 import InputSelect from './ui/select/InputSelect.vue';
 import Switch from './ui/switch/Switch.vue';
 import ActionTab from './ui/tab/ActionTab.vue';
+import * as action from './ui/table/action';
+import * as column from './ui/table/column';
+import * as data from './ui/table/data';
 import EditTable from './ui/table/EditTable.vue';
 import EditTableActionCell from './ui/table/EditTableActionCell.vue';
+import * as header from './ui/table/header';
+import * as pagination from './ui/table/pagination';
+import * as store from './ui/table/store';
 import Table from './ui/table/Table.vue';
 import TableActions from './ui/table/TableActions.vue';
 import TableCell from './ui/table/TableCell.vue';
@@ -193,12 +200,6 @@ import TableHeaderAction from './ui/table/TableHeaderAction.vue';
 import TableHeaderDialog from './ui/table/TableHeaderDialog.vue';
 import TableHeaderDialogFilter from './ui/table/TableHeaderDialogFilter.vue';
 import TableHeaderDialogSort from './ui/table/TableHeaderDialogSort.vue';
-import * as action from './ui/table/action';
-import * as column from './ui/table/column';
-import * as data from './ui/table/data';
-import * as header from './ui/table/header';
-import * as pagination from './ui/table/pagination';
-import * as store from './ui/table/store';
 import CheckTag from './ui/tag/CheckTag.vue';
 import CheckTagGroup from './ui/tag/CheckTagGroup.vue';
 import LinkTag from './ui/tag/LinkTag.vue';
@@ -212,12 +213,13 @@ import TransferPanel from './ui/transfer/TransferPanel.vue';
 export {
   CreateEditDatabaseDialog as ClCreateEditDatabaseDialog,
   CreateEditDatabaseTableDialog as ClCreateEditDatabaseTableDialog,
-  DatabaseDataSource as ClDatabaseDataSource,
   DatabaseDatabaseDetail as ClDatabaseDatabaseDetail,
+  DatabaseDataSource as ClDatabaseDataSource,
   DatabaseForm as ClDatabaseForm,
   DatabaseSidebar as ClDatabaseSidebar,
   DatabaseStatus as ClDatabaseStatus,
   DatabaseTableDetail as ClDatabaseTableDetail,
+  DatabaseNavTabs as ClDatabaseNavTabs,
   DatabaseTableDetailColumns as ClDatabaseTableDetailColumns,
   DatabaseTableDetailData as ClDatabaseTableDetailData,
   DatabaseTableDetailIndexes as ClDatabaseTableDetailIndexes,
@@ -298,10 +300,10 @@ export {
   Metric as ClMetric,
   ContextMenu as ClContextMenu,
   ContextMenuList as ClContextMenuList,
+  date as date,
   DateRangePicker as ClDateRangePicker,
   DateTimeRangePicker as ClDateTimeRangePicker,
   RangePicker as ClRangePicker,
-  date as date,
   ConfirmDialog as ClConfirmDialog,
   CreateEditDialog as ClCreateEditDialog,
   Dialog as ClDialog,
@@ -315,6 +317,7 @@ export {
   FileDiff as ClFileDiff,
   FileEditor as ClFileEditor,
   FileEditorCreateWithAiDialog as ClFileEditorCreateWithAiDialog,
+  fileEditorDropZone as fileEditorDropZone,
   FileEditorNavMenu as ClFileEditorNavMenu,
   FileEditorNavMenuContextMenu as ClFileEditorNavMenuContextMenu,
   FileEditorNavTabs as ClFileEditorNavTabs,
@@ -324,23 +327,21 @@ export {
   FileTab as ClFileTab,
   FileUpload as ClFileUpload,
   UploadFilesDialog as ClUploadFilesDialog,
-  fileEditorDropZone as fileEditorDropZone,
+  filter as filter,
   FilterCondition as ClFilterCondition,
   FilterConditionList as ClFilterConditionList,
   FilterInput as ClFilterInput,
   FilterSelect as ClFilterSelect,
-  filter as filter,
   Form as ClForm,
   FormItem as ClFormItem,
-  FormTableField as ClFormTableField,
   formTable as formTable,
+  FormTableField as ClFormTableField,
   useForm as useForm,
   AtomMaterialIcon as ClAtomMaterialIcon,
+  icon as icon,
   Icon as ClIcon,
   MenuItemIcon as ClMenuItemIcon,
-  icon as icon,
   InputList as ClInputList,
-  LexicalEditor as ClLexicalEditor,
   BlockOptionsDropdownList as ClBlockOptionsDropdownList,
   DropdownButton as ClDropdownButton,
   FloatLinkEditor as ClFloatLinkEditor,
@@ -356,6 +357,7 @@ export {
   useLexicalMounted as useLexicalMounted,
   useRichTextSetup as useRichTextSetup,
   useVariableSetup as useVariableSetup,
+  LexicalEditor as ClLexicalEditor,
   ImageNode as ImageNode,
   VariableNode as VariableNode,
   LexicalAutoFocusPlugin as ClLexicalAutoFocusPlugin,
@@ -393,8 +395,14 @@ export {
   InputSelect as ClInputSelect,
   Switch as ClSwitch,
   ActionTab as ClActionTab,
+  action as action,
+  column as column,
+  data as data,
   EditTable as ClEditTable,
   EditTableActionCell as ClEditTableActionCell,
+  header as header,
+  pagination as pagination,
+  store as store,
   Table as ClTable,
   TableActions as ClTableActions,
   TableCell as ClTableCell,
@@ -405,12 +413,6 @@ export {
   TableHeaderDialog as ClTableHeaderDialog,
   TableHeaderDialogFilter as ClTableHeaderDialogFilter,
   TableHeaderDialogSort as ClTableHeaderDialogSort,
-  action as action,
-  column as column,
-  data as data,
-  header as header,
-  pagination as pagination,
-  store as store,
   CheckTag as ClCheckTag,
   CheckTagGroup as ClCheckTagGroup,
   LinkTag as ClLinkTag,