From 43d648dcd3e71acb2464ab6613056f05300845a4 Mon Sep 17 00:00:00 2001
From: Li ZongYing <lizongying@msn.com>
Date: Fri, 17 Nov 2023 15:58:21 +0800
Subject: [PATCH 1/3] fix nonepipeline config

---
 README.md                                  | 2 ++
 README_CN.md                               | 2 ++
 docs/content/en/docs/usage/tools/_index.md | 2 ++
 docs/content/zh/docs/usage/tools/_index.md | 2 ++
 pkg/config/config.go                       | 2 +-
 pkg/exporter/exporter.go                   | 9 ++-------
 6 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index eabdc47..6fb3556 100644
--- a/README.md
+++ b/README.md
@@ -1211,6 +1211,8 @@ For more examples, you can refer to the following project.
 
 * `-s` Self-signed server certificate. If not set, the default CA certificate of this project will be used for signing.
 * `-c` Create a new CA certificate. If not set, the default CA certificate of this project will be used.
+* `-i` Add server IP addresses, separated by commas.
+* `-h` Add server domain names, separated by commas.
 
 dev
 
diff --git a/README_CN.md b/README_CN.md
index d259644..0f4dea4 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -1067,6 +1067,8 @@ go run example_spider.go -c example.yml -n example -f TestOk -m once
 
 * -s 自签名服务器证书。如果不设置，会使用本项目默认ca证书进行签名
 * -c 新创建ca证书。如果不设置，会使用本项目默认ca证书
+* -i 添加服务器ip，逗号分割
+* -h 添加服务器域名，逗号分割
 
 开发
 
diff --git a/docs/content/en/docs/usage/tools/_index.md b/docs/content/en/docs/usage/tools/_index.md
index 9e45c59..76aaba6 100644
--- a/docs/content/en/docs/usage/tools/_index.md
+++ b/docs/content/en/docs/usage/tools/_index.md
@@ -9,6 +9,8 @@ title: "Tools"
 
 * `-s` Self-signed server certificate. If not set, the default CA certificate of this project will be used for signing.
 * `-c` Create a new CA certificate. If not set, the default CA certificate of this project will be used.
+* `-i` Add server IP addresses, separated by commas.
+* `-h` Add server domain names, separated by commas.
 
 dev
 
diff --git a/docs/content/zh/docs/usage/tools/_index.md b/docs/content/zh/docs/usage/tools/_index.md
index ab17dfe..b423449 100644
--- a/docs/content/zh/docs/usage/tools/_index.md
+++ b/docs/content/zh/docs/usage/tools/_index.md
@@ -9,6 +9,8 @@ title: "工具"
 
 * -s 自签名服务器证书。如果不设置，会使用本项目默认ca证书进行签名
 * -c 新创建ca证书。如果不设置，会使用本项目默认ca证书
+* -i 添加服务器ip，逗号分割
+* -h 添加服务器域名，逗号分割
 
 开发
 
diff --git a/pkg/config/config.go b/pkg/config/config.go
index 8d719f4..9ed878c 100644
--- a/pkg/config/config.go
+++ b/pkg/config/config.go
@@ -430,7 +430,7 @@ func (c *Config) GetEnableNonePipeline() bool {
 		c.EnableCsvPipeline = &enableNonePipeline
 	}
 
-	return *c.EnableCsvPipeline
+	return *c.EnableNonePipeline
 }
 func (c *Config) GetEnableCsvPipeline() bool {
 	if c.EnableCsvPipeline == nil {
diff --git a/pkg/exporter/exporter.go b/pkg/exporter/exporter.go
index 3f87db9..44de73d 100644
--- a/pkg/exporter/exporter.go
+++ b/pkg/exporter/exporter.go
@@ -1,7 +1,6 @@
 package exporter
 
 import (
-	"errors"
 	"github.com/lizongying/go-crawler/pkg"
 	"github.com/lizongying/go-crawler/pkg/pipelines"
 	"reflect"
@@ -19,14 +18,10 @@ type Exporter struct {
 
 func (e *Exporter) Export(item pkg.Item) (err error) {
 	for _, v := range e.pipelines {
-		e := v.ProcessItem(item)
-		if e != nil {
-			err = errors.Join(err, e)
+		if err = v.ProcessItem(item); err != nil {
+			e.logger.Error(err)
 		}
 	}
-	if err != nil {
-		e.logger.Error(err)
-	}
 	return
 }
 

From 3673567ecc8f83e7691af7e1ce263216851a2297 Mon Sep 17 00:00:00 2001
From: Li ZongYing <lizongying@msn.com>
Date: Fri, 17 Nov 2023 19:58:15 +0800
Subject: [PATCH 2/3] admin support search

---
 web/ui/src/views/HomeView.vue    |  12 +-
 web/ui/src/views/JobsView.vue    | 330 +++++++++++++++----------
 web/ui/src/views/NodesView.vue   | 370 +++++++++++++++++-----------
 web/ui/src/views/RecordsView.vue | 218 ++++++++++++-----
 web/ui/src/views/SpidersView.vue | 402 +++++++++++++++++++------------
 web/ui/src/views/TasksView.vue   | 296 +++++++++++++++--------
 6 files changed, 1035 insertions(+), 593 deletions(-)

diff --git a/web/ui/src/views/HomeView.vue b/web/ui/src/views/HomeView.vue
index 0d5e316..d3b9c11 100644
--- a/web/ui/src/views/HomeView.vue
+++ b/web/ui/src/views/HomeView.vue
@@ -40,13 +40,17 @@ import {onBeforeUnmount, ref} from "vue";
 const nodesStore = useNodesStore()
 nodesStore.GetNodes()
 
+// auto refresh
+const checked1 = ref(true)
+const checked1Disable = ref(true)
+let interval = 0
 const refresh = () => {
   nodesStore.GetNodes()
 }
-const checked1 = ref(false)
-const checked1Disable = ref(false)
-
-let interval = null
+refresh()
+if (checked1.value) {
+  interval = setInterval(refresh, 1000)
+}
 const changeSwitch = () => {
   if (checked1.value) {
     interval = setInterval(refresh, 1000)
diff --git a/web/ui/src/views/JobsView.vue b/web/ui/src/views/JobsView.vue
index 4212e70..ed72df8 100644
--- a/web/ui/src/views/JobsView.vue
+++ b/web/ui/src/views/JobsView.vue
@@ -17,8 +17,38 @@
         </span>
       </template>
     </template>
-
-    <template #bodyCell="{ column, record }">
+    <template
+        #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
+    >
+      <div style="padding: 8px">
+        <a-input
+            ref="searchInput"
+            :placeholder="`Search ${column.dataIndex}`"
+            :value="selectedKeys[0]"
+            style="width: 188px; margin-bottom: 8px; display: block"
+            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+            @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
+        />
+        <a-button
+            type="primary"
+            size="small"
+            style="width: 90px; margin-right: 8px"
+            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
+        >
+          <template #icon>
+            <SearchOutlined/>
+          </template>
+          Search
+        </a-button>
+        <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
+          Reset
+        </a-button>
+      </div>
+    </template>
+    <template #customFilterIcon="{ filtered }">
+      <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }"/>
+    </template>
+    <template #bodyCell="{ text, column, record }">
       <template v-if="column.dataIndex === 'node'">
         <RouterLink :to="'/nodes?id='+record.node">
           {{ record.node }}
@@ -69,6 +99,22 @@
           </a>
         </span>
       </template>
+      <span v-if="state.searchText && state.searchedColumn === column.dataIndex">
+        <template
+            v-for="(fragment, i) in text
+            .toString()
+            .split(new RegExp(`(?<=${state.searchText})|(?=${state.searchText})`, 'i'))"
+        >
+          <mark
+              v-if="fragment.toLowerCase() === state.searchText.toLowerCase()"
+              :key="i"
+              class="highlight"
+          >
+            {{ fragment }}
+          </mark>
+          <template v-else>{{ fragment }}</template>
+        </template>
+      </span>
     </template>
   </a-table>
   <a-drawer v-model:open="open"
@@ -185,8 +231,8 @@
   </a-modal>
 </template>
 <script setup>
-import {ExclamationCircleOutlined, RightOutlined} from "@ant-design/icons-vue";
-import {RouterLink} from "vue-router";
+import {ExclamationCircleOutlined, RightOutlined, SearchOutlined} from "@ant-design/icons-vue";
+import {RouterLink, useRoute} from "vue-router";
 import {
   JobStatusIdle,
   JobStatusReady,
@@ -198,128 +244,147 @@ import {
 } from "@/stores/jobs";
 import {formatDuration, formattedDate} from "@/utils/time";
 import {sortBigInt, sortInt, sortStr} from "@/utils/sort";
-import {createVNode, onBeforeUnmount, reactive, ref} from "vue";
+import {computed, createVNode, onBeforeUnmount, reactive, ref} from "vue";
 import {message, Modal} from "ant-design-vue";
 import {useSpidersStore} from "@/stores/spiders";
 
-const columns = [
-  {
-    title: 'Id',
-    dataIndex: 'id',
-    width: 200,
-    sorter: (a, b) => sortBigInt(a.id, b.id),
-    defaultSortOrder: 'descend',
-  },
-  {
-    title: 'Schedule',
-    dataIndex: 'schedule',
-    width: 150,
-    sorter: (a, b) => sortStr(a.schedule, b.schedule),
-  },
-  {
-    title: 'Command',
-    dataIndex: 'command',
-    width: 350,
-    ellipsis: true,
-  },
-  {
-    title: 'Node',
-    dataIndex: 'node',
-    width: 200,
-    sorter: (a, b) => sortBigInt(a.node, b.node),
-  },
-  {
-    title: 'Spider',
-    dataIndex: 'spider',
-    sorter: (a, b) => sortStr(a.spider, b.spider),
-    width: 200,
-  },
-  {
-    title: 'Status',
-    dataIndex: 'status',
-    width: 100,
-    filters: [
-      {
-        text: 'ready',
-        value: JobStatusReady,
-      },
-      {
-        text: 'starting',
-        value: JobStatusStarting,
-      },
-      {
-        text: 'running',
-        value: JobStatusRunning,
-      },
-      {
-        text: 'idle',
-        value: JobStatusIdle,
+const filteredInfo = reactive({});
+const {query} = useRoute();
+if ('id' in query) {
+  filteredInfo.id = [query.id]
+}
+const columns = computed(() => {
+  return [
+    {
+      title: 'Id',
+      dataIndex: 'id',
+      width: 200,
+      sorter: (a, b) => sortBigInt(a.id, b.id),
+      defaultSortOrder: 'descend',
+      customFilterDropdown: true,
+      filteredValue: filteredInfo.id || null,
+      onFilter: (value, record) =>
+          record.id.toString().toLowerCase().includes(value.toLowerCase()),
+      onFilterDropdownOpenChange: visible => {
+        if (visible) {
+          setTimeout(() => {
+            searchInput.value.focus();
+          }, 100);
+        }
       },
-      {
-        text: 'stopping',
-        value: JobStatusStopping,
+    },
+    {
+      title: 'Schedule',
+      dataIndex: 'schedule',
+      width: 150,
+      sorter: (a, b) => sortStr(a.schedule, b.schedule),
+    },
+    {
+      title: 'Command',
+      dataIndex: 'command',
+      width: 350,
+      ellipsis: true,
+    },
+    {
+      title: 'Node',
+      dataIndex: 'node',
+      width: 200,
+      sorter: (a, b) => sortBigInt(a.node, b.node),
+    },
+    {
+      title: 'Spider',
+      dataIndex: 'spider',
+      sorter: (a, b) => sortStr(a.spider, b.spider),
+      width: 200,
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      width: 100,
+      filters: [
+        {
+          text: 'ready',
+          value: JobStatusReady,
+        },
+        {
+          text: 'starting',
+          value: JobStatusStarting,
+        },
+        {
+          text: 'running',
+          value: JobStatusRunning,
+        },
+        {
+          text: 'idle',
+          value: JobStatusIdle,
+        },
+        {
+          text: 'stopping',
+          value: JobStatusStopping,
+        },
+        {
+          text: 'stopped',
+          value: JobStatusStopped,
+        },
+      ],
+      onFilter: (value, record) => record.status === value,
+      filteredValue: null,
+    },
+    {
+      title: 'Start Time',
+      dataIndex: 'start_time',
+      width: 200,
+      sorter: (a, b) => a.start_time - b.start_time,
+    },
+    {
+      title: 'Finish Time',
+      dataIndex: 'finish_time',
+      width: 200,
+      sorter: (a, b) => {
+        if (a.finish_time === b.finish_time) {
+          return 0
+        }
+        const a_finish_time = a.finish_time !== 0 ? a.finish_time : Math.floor(Date.now() / 1000)
+        const b_finish_time = b.finish_time !== 0 ? b.finish_time : Math.floor(Date.now() / 1000)
+        return a_finish_time - b_finish_time
       },
-      {
-        text: 'stopped',
-        value: JobStatusStopped,
+    },
+    {
+      title: 'Duration',
+      dataIndex: 'duration',
+      width: 150,
+      sorter: (a, b) => {
+        let a_finish_time = a.finish_time
+        if (a.start_time === 0 && a.finish_time === 0) {
+          a_finish_time = Math.floor(Date.now() / 1000)
+        }
+        let b_finish_time = b.finish_time
+        if (b.start_time === 0 && b.finish_time === 0) {
+          b_finish_time = Math.floor(Date.now() / 1000)
+        }
+        return (a_finish_time - a.start_time) - (b_finish_time - b.start_time)
       },
-    ],
-    onFilter: (value, record) => record.status === value,
-  },
-  {
-    title: 'Start Time',
-    dataIndex: 'start_time',
-    width: 200,
-    sorter: (a, b) => a.start_time - b.start_time,
-  },
-  {
-    title: 'Finish Time',
-    dataIndex: 'finish_time',
-    width: 200,
-    sorter: (a, b) => {
-      if (a.finish_time === b.finish_time) {
-        return 0
-      }
-      const a_finish_time = a.finish_time !== 0 ? a.finish_time : Math.floor(Date.now() / 1000)
-      const b_finish_time = b.finish_time !== 0 ? b.finish_time : Math.floor(Date.now() / 1000)
-      return a_finish_time - b_finish_time
     },
-  },
-  {
-    title: 'Duration',
-    dataIndex: 'duration',
-    width: 150,
-    sorter: (a, b) => {
-      let a_finish_time = a.finish_time
-      if (a.start_time === 0 && a.finish_time === 0) {
-        a_finish_time = Math.floor(Date.now() / 1000)
-      }
-      let b_finish_time = b.finish_time
-      if (b.start_time === 0 && b.finish_time === 0) {
-        b_finish_time = Math.floor(Date.now() / 1000)
-      }
-      return (a_finish_time - a.start_time) - (b_finish_time - b.start_time)
+    {
+      title: 'Task',
+      dataIndex: 'task',
+      sorter: (a, b) => sortInt(a.task, b.task),
+      width: 100,
     },
-  },
-  {
-    title: 'Task',
-    dataIndex: 'task',
-    sorter: (a, b) => sortInt(a.task, b.task),
-    width: 100,
-  },
-  {
-    title: 'Record',
-    dataIndex: 'record',
-    sorter: (a, b) => sortInt(a.record, b.record),
-    width: 100,
-  },
-  {
-    title: 'Action',
-    dataIndex: 'action',
-    width: 200,
-    fixed: 'right',
-  },
-];
+    {
+      title: 'Record',
+      dataIndex: 'record',
+      sorter: (a, b) => sortInt(a.record, b.record),
+      width: 100,
+    },
+    {
+      title: 'Action',
+      dataIndex: 'action',
+      width: 200,
+      fixed: 'right',
+    },
+  ];
+});
 
 const jobsStore = useJobsStore()
 jobsStore.GetJobs()
@@ -344,13 +409,16 @@ const jobStatusName = (status) => {
 }
 
 // auto refresh
+const checked1 = ref(true)
+const checked1Disable = ref(true)
+let interval = 0
 const refresh = () => {
   jobsStore.GetJobs()
 }
-const checked1 = ref(true)
-const checked1Disable = ref(true)
-
-let interval = setInterval(refresh, 1000)
+refresh()
+if (checked1.value) {
+  interval = setInterval(refresh, 1000)
+}
 const changeSwitch = () => {
   if (checked1.value) {
     interval = setInterval(refresh, 1000)
@@ -489,6 +557,24 @@ const handleChange = () => {
   }
   formJob.func = ''
 };
+
+// search
+const state = reactive({
+  searchText: '',
+  searchedColumn: '',
+});
+const searchInput = ref();
+const handleSearch = (selectedKeys, confirm, dataIndex) => {
+  confirm();
+  state.searchText = selectedKeys[0];
+  state.searchedColumn = dataIndex;
+};
+const handleReset = clearFilters => {
+  clearFilters({
+    confirm: true,
+  });
+  state.searchText = '';
+};
 </script>
 <style>
 </style>
diff --git a/web/ui/src/views/NodesView.vue b/web/ui/src/views/NodesView.vue
index a9e5403..57f8ef0 100644
--- a/web/ui/src/views/NodesView.vue
+++ b/web/ui/src/views/NodesView.vue
@@ -16,8 +16,38 @@
         </span>
       </template>
     </template>
-
-    <template #bodyCell="{ column, record }">
+    <template
+        #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
+    >
+      <div style="padding: 8px">
+        <a-input
+            ref="searchInput"
+            :placeholder="`Search ${column.dataIndex}`"
+            :value="selectedKeys[0]"
+            style="width: 188px; margin-bottom: 8px; display: block"
+            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+            @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
+        />
+        <a-button
+            type="primary"
+            size="small"
+            style="width: 90px; margin-right: 8px"
+            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
+        >
+          <template #icon>
+            <SearchOutlined/>
+          </template>
+          Search
+        </a-button>
+        <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
+          Reset
+        </a-button>
+      </div>
+    </template>
+    <template #customFilterIcon="{ filtered }">
+      <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }"/>
+    </template>
+    <template #bodyCell="{ text, column, record }">
       <template v-if="column.dataIndex === 'spider'">
         <RouterLink :to="'/spiders?node='+record.id">
           {{ record.spider }}
@@ -68,6 +98,22 @@
           </a>
         </span>
       </template>
+      <span v-if="state.searchText && state.searchedColumn === column.dataIndex">
+        <template
+            v-for="(fragment, i) in text
+            .toString()
+            .split(new RegExp(`(?<=${state.searchText})|(?=${state.searchText})`, 'i'))"
+        >
+          <mark
+              v-if="fragment.toLowerCase() === state.searchText.toLowerCase()"
+              :key="i"
+              class="highlight"
+          >
+            {{ fragment }}
+          </mark>
+          <template v-else>{{ fragment }}</template>
+        </template>
+      </span>
     </template>
   </a-table>
   <a-drawer v-model:open="open"
@@ -85,8 +131,8 @@
   </a-drawer>
 </template>
 <script setup>
-import {RightOutlined} from "@ant-design/icons-vue";
-import {RouterLink} from "vue-router";
+import {RightOutlined, SearchOutlined} from "@ant-design/icons-vue";
+import {RouterLink, useRoute} from "vue-router";
 import {
   NodeStatusIdle,
   NodeStatusReady,
@@ -98,156 +144,180 @@ import {
 } from "@/stores/nodes";
 import {formatDuration, formattedDate} from "@/utils/time";
 import {sortBigInt, sortInt, sortStr} from "@/utils/sort";
-import {onBeforeUnmount, reactive, ref} from "vue";
+import {computed, onBeforeUnmount, reactive, ref} from "vue";
 
-const columns = [
-  {
-    title: 'Id',
-    dataIndex: 'id',
-    width: 200,
-    sorter: (a, b) => sortBigInt(a.id, b.id),
-    defaultSortOrder: 'descend',
-  },
-  {
-    title: 'Hostname',
-    dataIndex: 'hostname',
-    width: 200,
-    ellipsis: true,
-    sorter: (a, b) => sortStr(a.hostname, b.hostname),
-  },
-  {
-    title: 'Ip',
-    dataIndex: 'ip',
-    width: 200,
-    ellipsis: true,
-    sorter: (a, b) => sortStr(a.ip, b.ip),
-  },
-  {
-    title: 'Start Time',
-    dataIndex: 'start_time',
-    width: 200,
-    sorter: (a, b) => a.start_time - b.start_time,
-  },
-  {
-    title: 'Finish Time',
-    dataIndex: 'finish_time',
-    width: 200,
-    sorter: (a, b) => {
-      if (a.finish_time === b.finish_time) {
-        return 0
-      }
-      const a_finish_time = a.finish_time !== 0 ? a.finish_time : Math.floor(Date.now() / 1000)
-      const b_finish_time = b.finish_time !== 0 ? b.finish_time : Math.floor(Date.now() / 1000)
-      return a_finish_time - b_finish_time
+const filteredInfo = reactive({});
+const {query} = useRoute();
+if ('id' in query) {
+  filteredInfo.id = [query.id]
+}
+const columns = computed(() => {
+  return [
+    {
+      title: 'Id',
+      dataIndex: 'id',
+      width: 200,
+      sorter: (a, b) => sortBigInt(a.id, b.id),
+      defaultSortOrder: 'descend',
+      customFilterDropdown: true,
+      filteredValue: filteredInfo.id || null,
+      onFilter: (value, record) =>
+          record.id.toString().toLowerCase().includes(value.toLowerCase()),
+      onFilterDropdownOpenChange: visible => {
+        if (visible) {
+          setTimeout(() => {
+            searchInput.value.focus();
+          }, 100);
+        }
+      },
     },
-  },
-  {
-    title: 'Duration',
-    dataIndex: 'duration',
-    width: 150,
-    sorter: (a, b) => {
-      let a_finish_time = a.finish_time
-      if (a.start_time === 0 && a.finish_time === 0) {
-        a_finish_time = Math.floor(Date.now() / 1000)
-      }
-      let b_finish_time = b.finish_time
-      if (b.start_time === 0 && b.finish_time === 0) {
-        b_finish_time = Math.floor(Date.now() / 1000)
-      }
-      return (a_finish_time - a.start_time) - (b_finish_time - b.start_time)
+    {
+      title: 'Hostname',
+      dataIndex: 'hostname',
+      width: 200,
+      ellipsis: true,
+      sorter: (a, b) => sortStr(a.hostname, b.hostname),
     },
-  },
-  {
-    title: 'Enable',
-    dataIndex: 'enable',
-    width: 100,
-    filters: [
-      {
-        text: 'enable',
-        value: true,
-      },
-      {
-        text: 'disable',
-        value: false,
-      },
-    ],
-    onFilter: (value, record) => record.enable === value,
-  },
-  {
-    title: 'Status',
-    dataIndex: 'status',
-    width: 100,
-    filters: [
-      {
-        text: 'ready',
-        value: NodeStatusReady,
-      },
-      {
-        text: 'starting',
-        value: NodeStatusStarting,
-      },
-      {
-        text: 'running',
-        value: NodeStatusRunning,
-      },
-      {
-        text: 'idle',
-        value: NodeStatusIdle,
-      },
-      {
-        text: 'stopping',
-        value: NodeStatusStopping,
+    {
+      title: 'Ip',
+      dataIndex: 'ip',
+      width: 200,
+      ellipsis: true,
+      sorter: (a, b) => sortStr(a.ip, b.ip),
+    },
+    {
+      title: 'Start Time',
+      dataIndex: 'start_time',
+      width: 200,
+      sorter: (a, b) => a.start_time - b.start_time,
+    },
+    {
+      title: 'Finish Time',
+      dataIndex: 'finish_time',
+      width: 200,
+      sorter: (a, b) => {
+        if (a.finish_time === b.finish_time) {
+          return 0
+        }
+        const a_finish_time = a.finish_time !== 0 ? a.finish_time : Math.floor(Date.now() / 1000)
+        const b_finish_time = b.finish_time !== 0 ? b.finish_time : Math.floor(Date.now() / 1000)
+        return a_finish_time - b_finish_time
       },
-      {
-        text: 'stopped',
-        value: NodeStatusStopped,
+    },
+    {
+      title: 'Duration',
+      dataIndex: 'duration',
+      width: 150,
+      sorter: (a, b) => {
+        let a_finish_time = a.finish_time
+        if (a.start_time === 0 && a.finish_time === 0) {
+          a_finish_time = Math.floor(Date.now() / 1000)
+        }
+        let b_finish_time = b.finish_time
+        if (b.start_time === 0 && b.finish_time === 0) {
+          b_finish_time = Math.floor(Date.now() / 1000)
+        }
+        return (a_finish_time - a.start_time) - (b_finish_time - b.start_time)
       },
-    ],
-    onFilter: (value, record) => record.status === value,
-  },
-  {
-    title: 'Spider',
-    dataIndex: 'spider',
-    width: 100,
-    sorter: (a, b) => sortInt(a.spider, b.spider),
-  },
-  {
-    title: 'Job',
-    dataIndex: 'job',
-    width: 100,
-    sorter: (a, b) => sortInt(a.job, b.job),
-  },
-  {
-    title: 'Task',
-    dataIndex: 'task',
-    width: 100,
-    sorter: (a, b) => sortInt(a.task, b.task),
-  },
-  {
-    title: 'Record',
-    dataIndex: 'record',
-    width: 100,
-    sorter: (a, b) => sortInt(a.record, b.record),
-  },
-  {
-    title: 'Action',
-    dataIndex: 'action',
-    width: 200,
-    fixed: 'right',
-  },
-];
+    },
+    {
+      title: 'Enable',
+      dataIndex: 'enable',
+      width: 100,
+      filters: [
+        {
+          text: 'enable',
+          value: true,
+        },
+        {
+          text: 'disable',
+          value: false,
+        },
+      ],
+      onFilter: (value, record) => record.enable === value,
+      filteredValue: null,
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      width: 100,
+      filters: [
+        {
+          text: 'ready',
+          value: NodeStatusReady,
+        },
+        {
+          text: 'starting',
+          value: NodeStatusStarting,
+        },
+        {
+          text: 'running',
+          value: NodeStatusRunning,
+        },
+        {
+          text: 'idle',
+          value: NodeStatusIdle,
+        },
+        {
+          text: 'stopping',
+          value: NodeStatusStopping,
+        },
+        {
+          text: 'stopped',
+          value: NodeStatusStopped,
+        },
+      ],
+      onFilter: (value, record) => record.status === value,
+      filteredValue: null,
+    },
+    {
+      title: 'Spider',
+      dataIndex: 'spider',
+      width: 100,
+      sorter: (a, b) => sortInt(a.spider, b.spider),
+    },
+    {
+      title: 'Job',
+      dataIndex: 'job',
+      width: 100,
+      sorter: (a, b) => sortInt(a.job, b.job),
+    },
+    {
+      title: 'Task',
+      dataIndex: 'task',
+      width: 100,
+      sorter: (a, b) => sortInt(a.task, b.task),
+    },
+    {
+      title: 'Record',
+      dataIndex: 'record',
+      width: 100,
+      sorter: (a, b) => sortInt(a.record, b.record),
+    },
+    {
+      title: 'Action',
+      dataIndex: 'action',
+      width: 200,
+      fixed: 'right',
+    },
+  ];
+});
 
 const nodesStore = useNodesStore();
 
 nodesStore.GetNodes()
 
+// auto refresh
+const checked1 = ref(true)
+const checked1Disable = ref(true)
+let interval = 0
 const refresh = () => {
   nodesStore.GetNodes()
 }
-const checked1 = ref(true)
-const checked1Disable = ref(true)
-
-let interval = setInterval(refresh, 1000)
+refresh()
+if (checked1.value) {
+  interval = setInterval(refresh, 1000)
+}
 const changeSwitch = () => {
   if (checked1.value) {
     interval = setInterval(refresh, 1000)
@@ -261,7 +331,6 @@ onBeforeUnmount(() => {
   clearInterval(interval)
 })
 
-
 const nodeStatusName = (status) => {
   switch (status) {
     case NodeStatusReady:
@@ -290,6 +359,23 @@ const showDrawer = record => {
 // status list
 const activeKey = ref('1');
 
+// search
+const state = reactive({
+  searchText: '',
+  searchedColumn: '',
+});
+const searchInput = ref();
+const handleSearch = (selectedKeys, confirm, dataIndex) => {
+  confirm();
+  state.searchText = selectedKeys[0];
+  state.searchedColumn = dataIndex;
+};
+const handleReset = clearFilters => {
+  clearFilters({
+    confirm: true,
+  });
+  state.searchText = '';
+};
 </script>
 <style>
 </style>
diff --git a/web/ui/src/views/RecordsView.vue b/web/ui/src/views/RecordsView.vue
index bd5d33b..95de045 100644
--- a/web/ui/src/views/RecordsView.vue
+++ b/web/ui/src/views/RecordsView.vue
@@ -16,8 +16,38 @@
         </span>
       </template>
     </template>
-
-    <template #bodyCell="{ column, record }">
+    <template
+        #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
+    >
+      <div style="padding: 8px">
+        <a-input
+            ref="searchInput"
+            :placeholder="`Search ${column.dataIndex}`"
+            :value="selectedKeys[0]"
+            style="width: 188px; margin-bottom: 8px; display: block"
+            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+            @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
+        />
+        <a-button
+            type="primary"
+            size="small"
+            style="width: 90px; margin-right: 8px"
+            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
+        >
+          <template #icon>
+            <SearchOutlined/>
+          </template>
+          Search
+        </a-button>
+        <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
+          Reset
+        </a-button>
+      </div>
+    </template>
+    <template #customFilterIcon="{ filtered }">
+      <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }"/>
+    </template>
+    <template #bodyCell="{ text, column, record }">
       <template v-if="column.dataIndex === 'node'">
         <RouterLink :to="'/nodes?id='+record.node">
           {{ record.node }}
@@ -49,6 +79,22 @@
           </a>
         </span>
       </template>
+      <span v-if="state.searchText && state.searchedColumn === column.dataIndex">
+        <template
+            v-for="(fragment, i) in text
+            .toString()
+            .split(new RegExp(`(?<=${state.searchText})|(?=${state.searchText})`, 'i'))"
+        >
+          <mark
+              v-if="fragment.toLowerCase() === state.searchText.toLowerCase()"
+              :key="i"
+              class="highlight"
+          >
+            {{ fragment }}
+          </mark>
+          <template v-else>{{ fragment }}</template>
+        </template>
+      </span>
     </template>
   </a-table>
   <a-drawer v-model:open="open"
@@ -62,70 +108,88 @@
   </a-drawer>
 </template>
 <script setup>
-import {RightOutlined} from "@ant-design/icons-vue";
-import {RouterLink} from "vue-router";
+import {RightOutlined, SearchOutlined} from "@ant-design/icons-vue";
+import {RouterLink, useRoute} from "vue-router";
 import {formattedDate} from "@/utils/time";
 import {useRecordsStore} from "@/stores/records";
-import {onBeforeUnmount, reactive, ref} from "vue";
+import {computed, onBeforeUnmount, reactive, ref} from "vue";
 import {sortBigInt, sortStr} from "@/utils/sort";
 
-const columns = [
-  {
-    title: 'Id',
-    dataIndex: 'id',
-    width: 200,
-    sorter: (a, b) => sortBigInt(a.id, b.id),
-    defaultSortOrder: 'descend',
-  },
-  {
-    title: 'Unique Key',
-    dataIndex: 'unique_key',
-    width: 200,
-    sorter: (a, b) => sortStr(a.unique_key, b.unique_key),
-  },
-  {
-    title: 'Node',
-    dataIndex: 'node',
-    width: 200,
-    sorter: (a, b) => sortBigInt(a.node, b.node),
-  },
-  {
-    title: 'Spider',
-    dataIndex: 'spider',
-    width: 200,
-    sorter: (a, b) => sortStr(a.spider, b.spider),
-  },
-  {
-    title: 'Job',
-    dataIndex: 'job',
-    width: 200,
-    sorter: (a, b) => sortStr(a.job, b.job),
-  },
-  {
-    title: 'Task',
-    dataIndex: 'task',
-    width: 200,
-    sorter: (a, b) => sortBigInt(a.task, b.task),
-  },
-  {
-    title: 'Meta',
-    dataIndex: 'meta',
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: 'Save Time',
-    dataIndex: 'save_time',
-    width: 200,
-    sorter: (a, b) => a.save_time - b.save_time,
-  },
-  {
-    title: 'Action',
-    dataIndex: 'action',
-    width: 200,
-    fixed: 'right',
-  },
-];
+const filteredInfo = reactive({});
+const {query} = useRoute();
+if ('id' in query) {
+  filteredInfo.id = [query.id]
+}
+const columns = computed(() => {
+  return [
+    {
+      title: 'Id',
+      dataIndex: 'id',
+      width: 200,
+      sorter: (a, b) => sortBigInt(a.id, b.id),
+      defaultSortOrder: 'descend',
+      customFilterDropdown: true,
+      filteredValue: filteredInfo.id || null,
+      onFilter: (value, record) =>
+          record.id.toString().toLowerCase().includes(value.toLowerCase()),
+      onFilterDropdownOpenChange: visible => {
+        if (visible) {
+          setTimeout(() => {
+            searchInput.value.focus();
+          }, 100);
+        }
+      },
+    },
+    {
+      title: 'Unique Key',
+      dataIndex: 'unique_key',
+      width: 200,
+      sorter: (a, b) => sortStr(a.unique_key, b.unique_key),
+    },
+    {
+      title: 'Node',
+      dataIndex: 'node',
+      width: 200,
+      sorter: (a, b) => sortBigInt(a.node, b.node),
+    },
+    {
+      title: 'Spider',
+      dataIndex: 'spider',
+      width: 200,
+      sorter: (a, b) => sortStr(a.spider, b.spider),
+    },
+    {
+      title: 'Job',
+      dataIndex: 'job',
+      width: 200,
+      sorter: (a, b) => sortStr(a.job, b.job),
+    },
+    {
+      title: 'Task',
+      dataIndex: 'task',
+      width: 200,
+      sorter: (a, b) => sortBigInt(a.task, b.task),
+    },
+    {
+      title: 'Meta',
+      dataIndex: 'meta',
+      width: 200,
+      ellipsis: true,
+    },
+    {
+      title: 'Save Time',
+      dataIndex: 'save_time',
+      width: 200,
+      sorter: (a, b) => a.save_time - b.save_time,
+    },
+    {
+      title: 'Action',
+      dataIndex: 'action',
+      width: 200,
+      fixed: 'right',
+    },
+  ];
+});
 
 const recordsStore = useRecordsStore();
 
@@ -139,13 +203,17 @@ const showDrawer = record => {
 };
 const activeKey = ref('1');
 
+// auto refresh
+const checked1 = ref(true)
+const checked1Disable = ref(true)
+let interval = 0
 const refresh = () => {
   recordsStore.GetRecords()
 }
-const checked1 = ref(true)
-const checked1Disable = ref(true)
-
-let interval = setInterval(refresh, 1000)
+refresh()
+if (checked1.value) {
+  interval = setInterval(refresh, 1000)
+}
 const changeSwitch = () => {
   if (checked1.value) {
     interval = setInterval(refresh, 1000)
@@ -158,6 +226,24 @@ const changeSwitch = () => {
 onBeforeUnmount(() => {
   clearInterval(interval)
 })
+
+// search
+const state = reactive({
+  searchText: '',
+  searchedColumn: '',
+});
+const searchInput = ref();
+const handleSearch = (selectedKeys, confirm, dataIndex) => {
+  confirm();
+  state.searchText = selectedKeys[0];
+  state.searchedColumn = dataIndex;
+};
+const handleReset = clearFilters => {
+  clearFilters({
+    confirm: true,
+  });
+  state.searchText = '';
+};
 </script>
 <style>
 </style>
diff --git a/web/ui/src/views/SpidersView.vue b/web/ui/src/views/SpidersView.vue
index 21f49e2..9ee640d 100644
--- a/web/ui/src/views/SpidersView.vue
+++ b/web/ui/src/views/SpidersView.vue
@@ -17,8 +17,38 @@
         </span>
       </template>
     </template>
-
-    <template #bodyCell="{ column, record }">
+    <template
+        #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
+    >
+      <div style="padding: 8px">
+        <a-input
+            ref="searchInput"
+            :placeholder="`Search ${column.dataIndex}`"
+            :value="selectedKeys[0]"
+            style="width: 188px; margin-bottom: 8px; display: block"
+            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+            @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
+        />
+        <a-button
+            type="primary"
+            size="small"
+            style="width: 90px; margin-right: 8px"
+            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
+        >
+          <template #icon>
+            <SearchOutlined/>
+          </template>
+          Search
+        </a-button>
+        <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
+          Reset
+        </a-button>
+      </div>
+    </template>
+    <template #customFilterIcon="{ filtered }">
+      <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }"/>
+    </template>
+    <template #bodyCell="{ text, column, record }">
       <template v-if="column.key === 'spider'">
         <a>
           {{ record.spider }}
@@ -91,6 +121,22 @@
           </a>
         </span>
       </template>
+      <span v-if="state.searchText && state.searchedColumn === column.dataIndex">
+        <template
+            v-for="(fragment, i) in text
+            .toString()
+            .split(new RegExp(`(?<=${state.searchText})|(?=${state.searchText})`, 'i'))"
+        >
+          <mark
+              v-if="fragment.toLowerCase() === state.searchText.toLowerCase()"
+              :key="i"
+              class="highlight"
+          >
+            {{ fragment }}
+          </mark>
+          <template v-else>{{ fragment }}</template>
+        </template>
+      </span>
     </template>
   </a-table>
   <a-drawer v-model:open="open"
@@ -108,8 +154,8 @@
   </a-drawer>
 </template>
 <script setup>
-import {RightOutlined} from "@ant-design/icons-vue";
-import {RouterLink} from "vue-router";
+import {RightOutlined, SearchOutlined} from "@ant-design/icons-vue";
+import {RouterLink, useRoute} from "vue-router";
 import {
   SpiderStatusIdle,
   SpiderStatusReady,
@@ -121,164 +167,184 @@ import {
 } from "@/stores/spiders";
 import {formatDuration, formattedDate} from "@/utils/time";
 import {sortBigInt, sortInt, sortStr} from "@/utils/sort";
-import {onBeforeUnmount, reactive, ref} from "vue";
+import {computed, onBeforeUnmount, reactive, ref} from "vue";
 import {TaskStatusError, TaskStatusPending, TaskStatusRunning, TaskStatusSuccess} from "@/stores/tasks";
 
-const columns = [
-  {
-    title: 'Id',
-    dataIndex: 'id',
-    width: 200,
-    sorter: (a, b) => sortBigInt(a.id, b.id),
-    defaultSortOrder: 'descend',
-  },
-  {
-    title: 'Name',
-    dataIndex: 'spider',
-    width: 200,
-    sorter: (a, b) => sortStr(a.spider, b.spider),
-  },
-  {
-    title: 'Node',
-    dataIndex: 'node',
-    width: 200,
-    sorter: (a, b) => sortBigInt(a.node, b.node),
-  },
-  {
-    title: 'Status',
-    dataIndex: 'status',
-    width: 100,
-    filters: [
-      {
-        text: 'ready',
-        value: SpiderStatusReady,
-      },
-      {
-        text: 'starting',
-        value: SpiderStatusStarting,
-      },
-      {
-        text: 'running',
-        value: SpiderStatusRunning,
-      },
-      {
-        text: 'idle',
-        value: SpiderStatusIdle,
-      },
-      {
-        text: 'stopping',
-        value: SpiderStatusStopping,
-      },
-      {
-        text: 'stopped',
-        value: SpiderStatusStopped,
+const filteredInfo = reactive({});
+const {query} = useRoute();
+if ('id' in query) {
+  filteredInfo.id = [query.id]
+}
+const columns = computed(() => {
+  return [
+    {
+      title: 'Id',
+      dataIndex: 'id',
+      width: 200,
+      sorter: (a, b) => sortBigInt(a.id, b.id),
+      defaultSortOrder: 'descend',
+      customFilterDropdown: true,
+      filteredValue: filteredInfo.id || null,
+      onFilter: (value, record) =>
+          record.id.toString().toLowerCase().includes(value.toLowerCase()),
+      onFilterDropdownOpenChange: visible => {
+        if (visible) {
+          setTimeout(() => {
+            searchInput.value.focus();
+          }, 100);
+        }
       },
-    ],
-    onFilter: (value, record) => record.status === value,
-  },
-  {
-    title: 'Start Time',
-    dataIndex: 'start_time',
-    width: 200,
-    sorter: (a, b) => a.start_time - b.start_time,
-  },
-  {
-    title: 'Finish Time',
-    dataIndex: 'finish_time',
-    width: 200,
-    sorter: (a, b) => {
-      if (a.finish_time === b.finish_time) {
-        return 0
-      }
-      const a_finish_time = a.finish_time !== 0 ? a.finish_time : Math.floor(Date.now() / 1000)
-      const b_finish_time = b.finish_time !== 0 ? b.finish_time : Math.floor(Date.now() / 1000)
-      return a_finish_time - b_finish_time
     },
-  },
-  {
-    title: 'Duration',
-    dataIndex: 'duration',
-    width: 150,
-    sorter: (a, b) => {
-      let a_finish_time = a.finish_time
-      if (a.start_time === 0 && a.finish_time === 0) {
-        a_finish_time = Math.floor(Date.now() / 1000)
-      }
-      let b_finish_time = b.finish_time
-      if (b.start_time === 0 && b.finish_time === 0) {
-        b_finish_time = Math.floor(Date.now() / 1000)
-      }
-      return (a_finish_time - a.start_time) - (b_finish_time - b.start_time)
+    {
+      title: 'Name',
+      dataIndex: 'spider',
+      width: 200,
+      sorter: (a, b) => sortStr(a.spider, b.spider),
     },
-  },
-  {
-    title: 'Last Task Status',
-    dataIndex: 'last_task_status',
-    width: 200,
-    filters: [
-      {
-        text: 'pending',
-        value: TaskStatusPending,
-      },
-      {
-        text: 'running',
-        value: TaskStatusRunning,
+    {
+      title: 'Node',
+      dataIndex: 'node',
+      width: 200,
+      sorter: (a, b) => sortBigInt(a.node, b.node),
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      width: 100,
+      filters: [
+        {
+          text: 'ready',
+          value: SpiderStatusReady,
+        },
+        {
+          text: 'starting',
+          value: SpiderStatusStarting,
+        },
+        {
+          text: 'running',
+          value: SpiderStatusRunning,
+        },
+        {
+          text: 'idle',
+          value: SpiderStatusIdle,
+        },
+        {
+          text: 'stopping',
+          value: SpiderStatusStopping,
+        },
+        {
+          text: 'stopped',
+          value: SpiderStatusStopped,
+        },
+      ],
+      onFilter: (value, record) => record.status === value,
+      filteredValue: null,
+    },
+    {
+      title: 'Start Time',
+      dataIndex: 'start_time',
+      width: 200,
+      sorter: (a, b) => a.start_time - b.start_time,
+    },
+    {
+      title: 'Finish Time',
+      dataIndex: 'finish_time',
+      width: 200,
+      sorter: (a, b) => {
+        if (a.finish_time === b.finish_time) {
+          return 0
+        }
+        const a_finish_time = a.finish_time !== 0 ? a.finish_time : Math.floor(Date.now() / 1000)
+        const b_finish_time = b.finish_time !== 0 ? b.finish_time : Math.floor(Date.now() / 1000)
+        return a_finish_time - b_finish_time
       },
-      {
-        text: 'success',
-        value: TaskStatusSuccess,
+    },
+    {
+      title: 'Duration',
+      dataIndex: 'duration',
+      width: 150,
+      sorter: (a, b) => {
+        let a_finish_time = a.finish_time
+        if (a.start_time === 0 && a.finish_time === 0) {
+          a_finish_time = Math.floor(Date.now() / 1000)
+        }
+        let b_finish_time = b.finish_time
+        if (b.start_time === 0 && b.finish_time === 0) {
+          b_finish_time = Math.floor(Date.now() / 1000)
+        }
+        return (a_finish_time - a.start_time) - (b_finish_time - b.start_time)
       },
-      {
-        text: 'error',
-        value: TaskStatusError,
+    },
+    {
+      title: 'Last Task Status',
+      dataIndex: 'last_task_status',
+      width: 200,
+      filters: [
+        {
+          text: 'pending',
+          value: TaskStatusPending,
+        },
+        {
+          text: 'running',
+          value: TaskStatusRunning,
+        },
+        {
+          text: 'success',
+          value: TaskStatusSuccess,
+        },
+        {
+          text: 'error',
+          value: TaskStatusError,
+        },
+      ],
+      onFilter: (value, record) => record.last_task_status === value,
+      filteredValue: null,
+    },
+    {
+      title: 'Last Task Start Time',
+      dataIndex: 'last_task_start_time',
+      width: 200,
+      sorter: (a, b) => a.last_task_start_time - b.last_task_start_time,
+    },
+    {
+      title: 'Last Task Finish Time',
+      dataIndex: 'last_task_finish_time',
+      width: 200,
+      sorter: (a, b) => {
+        if (a.last_task_finish_time === b.last_task_finish_time) {
+          return 0
+        }
+        const a_finish_time = a.last_task_finish_time !== 0 ? a.last_task_finish_time : Math.floor(Date.now() / 1000)
+        const b_finish_time = b.last_task_finish_time !== 0 ? b.last_task_finish_time : Math.floor(Date.now() / 1000)
+        return a_finish_time - b_finish_time
       },
-    ],
-    onFilter: (value, record) => record.last_task_status === value,
-  },
-  {
-    title: 'Last Task Start Time',
-    dataIndex: 'last_task_start_time',
-    width: 200,
-    sorter: (a, b) => a.last_task_start_time - b.last_task_start_time,
-  },
-  {
-    title: 'Last Task Finish Time',
-    dataIndex: 'last_task_finish_time',
-    width: 200,
-    sorter: (a, b) => {
-      if (a.last_task_finish_time === b.last_task_finish_time) {
-        return 0
-      }
-      const a_finish_time = a.last_task_finish_time !== 0 ? a.last_task_finish_time : Math.floor(Date.now() / 1000)
-      const b_finish_time = b.last_task_finish_time !== 0 ? b.last_task_finish_time : Math.floor(Date.now() / 1000)
-      return a_finish_time - b_finish_time
     },
-  },
-  {
-    title: 'Job',
-    dataIndex: 'job',
-    width: 100,
-    sorter: (a, b) => sortInt(a.job, b.job),
-  },
-  {
-    title: 'Task',
-    dataIndex: 'task',
-    width: 100,
-    sorter: (a, b) => sortInt(a.task, b.task),
-  },
-  {
-    title: 'Record',
-    dataIndex: 'record',
-    width: 100,
-    sorter: (a, b) => sortInt(a.record, b.record),
-  },
-  {
-    title: 'Action',
-    dataIndex: 'action',
-    width: 200,
-    fixed: 'right',
-  },
-];
+    {
+      title: 'Job',
+      dataIndex: 'job',
+      width: 100,
+      sorter: (a, b) => sortInt(a.job, b.job),
+    },
+    {
+      title: 'Task',
+      dataIndex: 'task',
+      width: 100,
+      sorter: (a, b) => sortInt(a.task, b.task),
+    },
+    {
+      title: 'Record',
+      dataIndex: 'record',
+      width: 100,
+      sorter: (a, b) => sortInt(a.record, b.record),
+    },
+    {
+      title: 'Action',
+      dataIndex: 'action',
+      width: 200,
+      fixed: 'right',
+    },
+  ];
+});
 
 const spidersStore = useSpidersStore();
 
@@ -317,13 +383,18 @@ const taskStatusName = (status) => {
       return 'unknown'
   }
 }
+
+// auto refresh
+const checked1 = ref(true)
+const checked1Disable = ref(true)
+let interval = 0
 const refresh = () => {
   spidersStore.GetSpiders()
 }
-const checked1 = ref(true)
-const checked1Disable = ref(true)
-
-let interval = setInterval(refresh, 1000)
+refresh()
+if (checked1.value) {
+  interval = setInterval(refresh, 1000)
+}
 const changeSwitch = () => {
   if (checked1.value) {
     interval = setInterval(refresh, 1000)
@@ -346,6 +417,23 @@ const showDrawer = record => {
 // status list
 const activeKey = ref('1');
 
+// search
+const state = reactive({
+  searchText: '',
+  searchedColumn: '',
+});
+const searchInput = ref();
+const handleSearch = (selectedKeys, confirm, dataIndex) => {
+  confirm();
+  state.searchText = selectedKeys[0];
+  state.searchedColumn = dataIndex;
+};
+const handleReset = clearFilters => {
+  clearFilters({
+    confirm: true,
+  });
+  state.searchText = '';
+};
 </script>
 <style>
 </style>
diff --git a/web/ui/src/views/TasksView.vue b/web/ui/src/views/TasksView.vue
index 2fc988c..1034b88 100644
--- a/web/ui/src/views/TasksView.vue
+++ b/web/ui/src/views/TasksView.vue
@@ -16,8 +16,38 @@
         </span>
       </template>
     </template>
-
-    <template #bodyCell="{ column, record }">
+    <template
+        #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
+    >
+      <div style="padding: 8px">
+        <a-input
+            ref="searchInput"
+            :placeholder="`Search ${column.dataIndex}`"
+            :value="selectedKeys[0]"
+            style="width: 188px; margin-bottom: 8px; display: block"
+            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+            @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
+        />
+        <a-button
+            type="primary"
+            size="small"
+            style="width: 90px; margin-right: 8px"
+            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
+        >
+          <template #icon>
+            <SearchOutlined/>
+          </template>
+          Search
+        </a-button>
+        <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
+          Reset
+        </a-button>
+      </div>
+    </template>
+    <template #customFilterIcon="{ filtered }">
+      <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }"/>
+    </template>
+    <template #bodyCell="{ text, column, record }">
       <template v-if="column.dataIndex === 'node'">
         <RouterLink :to="'/nodes?id='+record.node">
           {{ record.node }}
@@ -65,6 +95,22 @@
           </a>
         </span>
       </template>
+      <span v-if="state.searchText && state.searchedColumn === column.dataIndex">
+        <template
+            v-for="(fragment, i) in text
+            .toString()
+            .split(new RegExp(`(?<=${state.searchText})|(?=${state.searchText})`, 'i'))"
+        >
+          <mark
+              v-if="fragment.toLowerCase() === state.searchText.toLowerCase()"
+              :key="i"
+              class="highlight"
+          >
+            {{ fragment }}
+          </mark>
+          <template v-else>{{ fragment }}</template>
+        </template>
+      </span>
     </template>
   </a-table>
   <a-drawer v-model:open="open"
@@ -76,111 +122,130 @@
   </a-drawer>
 </template>
 <script setup>
-import {RightOutlined} from "@ant-design/icons-vue";
-import {onBeforeUnmount, ref} from "vue";
-import {RouterLink} from "vue-router";
+import {RightOutlined, SearchOutlined} from "@ant-design/icons-vue";
+import {computed, onBeforeUnmount, reactive, ref} from "vue";
+import {RouterLink, useRoute} from "vue-router";
 import {TaskStatusError, TaskStatusPending, TaskStatusRunning, TaskStatusSuccess, useTasksStore} from "@/stores/tasks";
 import {formatDuration, formattedDate} from "@/utils/time";
 import {sortBigInt, sortInt, sortStr} from "@/utils/sort";
 
-const columns = [
-  {
-    title: 'Id',
-    dataIndex: 'id',
-    width: 200,
-    sorter: (a, b) => sortBigInt(a.id, b.id),
-    defaultSortOrder: 'descend',
-  },
-  {
-    title: 'Node',
-    dataIndex: 'node',
-    width: 200,
-    sorter: (a, b) => sortBigInt(a.node, b.node),
-  },
-  {
-    title: 'Spider',
-    dataIndex: 'spider',
-    width: 200,
-    sorter: (a, b) => sortStr(a.spider, b.spider),
-  },
-  {
-    title: 'Job',
-    dataIndex: 'job',
-    width: 200,
-    sorter: (a, b) => sortBigInt(a.job, b.job),
-  },
-  {
-    title: 'Status',
-    dataIndex: 'status',
-    width: 100,
-    filters: [
-      {
-        text: 'pending',
-        value: TaskStatusPending,
-      },
-      {
-        text: 'running',
-        value: TaskStatusRunning,
+const filteredInfo = reactive({});
+const {query} = useRoute();
+if ('id' in query) {
+  filteredInfo.id = [query.id]
+}
+const columns = computed(() => {
+  return [
+    {
+      title: 'Id',
+      dataIndex: 'id',
+      width: 200,
+      sorter: (a, b) => sortBigInt(a.id, b.id),
+      defaultSortOrder: 'descend',
+      customFilterDropdown: true,
+      filteredValue: filteredInfo.id || null,
+      onFilter: (value, record) =>
+          record.id.toString().toLowerCase().includes(value.toLowerCase()),
+      onFilterDropdownOpenChange: visible => {
+        if (visible) {
+          setTimeout(() => {
+            searchInput.value.focus();
+          }, 100);
+        }
       },
-      {
-        text: 'success',
-        value: TaskStatusSuccess,
+    },
+    {
+      title: 'Node',
+      dataIndex: 'node',
+      width: 200,
+      sorter: (a, b) => sortBigInt(a.node, b.node),
+    },
+    {
+      title: 'Spider',
+      dataIndex: 'spider',
+      width: 200,
+      sorter: (a, b) => sortStr(a.spider, b.spider),
+    },
+    {
+      title: 'Job',
+      dataIndex: 'job',
+      width: 200,
+      sorter: (a, b) => sortBigInt(a.job, b.job),
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      width: 100,
+      filters: [
+        {
+          text: 'pending',
+          value: TaskStatusPending,
+        },
+        {
+          text: 'running',
+          value: TaskStatusRunning,
+        },
+        {
+          text: 'success',
+          value: TaskStatusSuccess,
+        },
+        {
+          text: 'error',
+          value: TaskStatusError,
+        },
+      ],
+      onFilter: (value, record) => record.status === value,
+      filteredValue: null,
+    },
+    {
+      title: 'Start Time',
+      dataIndex: 'start_time',
+      width: 200,
+      sorter: (a, b) => a.start_time - b.start_time,
+    },
+    {
+      title: 'Finish Time',
+      dataIndex: 'finish_time',
+      width: 200,
+      sorter: (a, b) => {
+        if (a.finish_time === b.finish_time) {
+          return 0
+        }
+        const a_finish_time = a.finish_time !== 0 ? a.finish_time : Math.floor(Date.now() / 1000)
+        const b_finish_time = b.finish_time !== 0 ? b.finish_time : Math.floor(Date.now() / 1000)
+        return a_finish_time - b_finish_time
       },
-      {
-        text: 'error',
-        value: TaskStatusError,
+    },
+    {
+      title: 'Duration',
+      dataIndex: 'duration',
+      width: 150,
+      sorter: (a, b) => {
+        let a_finish_time = a.finish_time
+        if (a.start_time === 0 && a.finish_time === 0) {
+          a_finish_time = Math.floor(Date.now() / 1000)
+        }
+        let b_finish_time = b.finish_time
+        if (b.start_time === 0 && b.finish_time === 0) {
+          b_finish_time = Math.floor(Date.now() / 1000)
+        }
+        return (a_finish_time - a.start_time) - (b_finish_time - b.start_time)
       },
-    ],
-    onFilter: (value, record) => record.status === value,
-  },
-  {
-    title: 'Start Time',
-    dataIndex: 'start_time',
-    width: 200,
-    sorter: (a, b) => a.start_time - b.start_time,
-  },
-  {
-    title: 'Finish Time',
-    dataIndex: 'finish_time',
-    width: 200,
-    sorter: (a, b) => {
-      if (a.finish_time === b.finish_time) {
-        return 0
-      }
-      const a_finish_time = a.finish_time !== 0 ? a.finish_time : Math.floor(Date.now() / 1000)
-      const b_finish_time = b.finish_time !== 0 ? b.finish_time : Math.floor(Date.now() / 1000)
-      return a_finish_time - b_finish_time
     },
-  },
-  {
-    title: 'Duration',
-    dataIndex: 'duration',
-    width: 150,
-    sorter: (a, b) => {
-      let a_finish_time = a.finish_time
-      if (a.start_time === 0 && a.finish_time === 0) {
-        a_finish_time = Math.floor(Date.now() / 1000)
-      }
-      let b_finish_time = b.finish_time
-      if (b.start_time === 0 && b.finish_time === 0) {
-        b_finish_time = Math.floor(Date.now() / 1000)
-      }
-      return (a_finish_time - a.start_time) - (b_finish_time - b.start_time)
+    {
+      title: 'Record',
+      dataIndex: 'record',
+      width: 100,
+      sorter: (a, b) => sortInt(a.record, b.record),
     },
-  },
-  {
-    title: 'Record',
-    dataIndex: 'record',
-    width: 100,
-    sorter: (a, b) => sortInt(a.record, b.record),
-  },
-  {
-    title: 'Action',
-    dataIndex: 'action',
-    width: 200,
-    fixed: 'right',
-  },
-];
+    {
+      title: 'Action',
+      dataIndex: 'action',
+      width: 200,
+      fixed: 'right',
+    },
+  ];
+});
 
 const tasksStore = useTasksStore();
 
@@ -206,13 +271,18 @@ const taskStatusName = (status) => {
       return 'unknown'
   }
 }
+
+// auto refresh
+const checked1 = ref(true)
+const checked1Disable = ref(true)
+let interval = 0
 const refresh = () => {
   tasksStore.GetTasks()
 }
-const checked1 = ref(true)
-const checked1Disable = ref(true)
-
-let interval = setInterval(refresh, 1000)
+refresh()
+if (checked1.value) {
+  interval = setInterval(refresh, 1000)
+}
 const changeSwitch = () => {
   if (checked1.value) {
     interval = setInterval(refresh, 1000)
@@ -225,6 +295,28 @@ const changeSwitch = () => {
 onBeforeUnmount(() => {
   clearInterval(interval)
 })
+
+// search
+const state = reactive({
+  searchText: '',
+  searchedColumn: '',
+});
+const searchInput = ref();
+const handleSearch = (selectedKeys, confirm, dataIndex) => {
+  confirm();
+  state.searchText = selectedKeys[0];
+  state.searchedColumn = dataIndex;
+};
+const handleReset = clearFilters => {
+  clearFilters({
+    confirm: true,
+  });
+  state.searchText = '';
+};
 </script>
 <style>
+.highlight {
+  background-color: rgb(255, 192, 105);
+  padding: 0;
+}
 </style>

From cc60ec06fa690ee085a8b1c6681613b75733298d Mon Sep 17 00:00:00 2001
From: Li ZongYing <lizongying@msn.com>
Date: Fri, 17 Nov 2023 20:38:10 +0800
Subject: [PATCH 3/3] fix admin filter

---
 web/ui/src/views/JobsView.vue    | 5 +++++
 web/ui/src/views/NodesView.vue   | 4 ++++
 web/ui/src/views/RecordsView.vue | 4 ++++
 web/ui/src/views/SpidersView.vue | 4 ++++
 web/ui/src/views/TasksView.vue   | 4 ++++
 5 files changed, 21 insertions(+)

diff --git a/web/ui/src/views/JobsView.vue b/web/ui/src/views/JobsView.vue
index ed72df8..757802a 100644
--- a/web/ui/src/views/JobsView.vue
+++ b/web/ui/src/views/JobsView.vue
@@ -253,6 +253,7 @@ const {query} = useRoute();
 if ('id' in query) {
   filteredInfo.id = [query.id]
 }
+
 const columns = computed(() => {
   return [
     {
@@ -565,11 +566,15 @@ const state = reactive({
 });
 const searchInput = ref();
 const handleSearch = (selectedKeys, confirm, dataIndex) => {
+  filteredInfo[dataIndex] = selectedKeys
   confirm();
   state.searchText = selectedKeys[0];
   state.searchedColumn = dataIndex;
 };
 const handleReset = clearFilters => {
+  Object.keys(filteredInfo).forEach(key => {
+    delete filteredInfo[key];
+  });
   clearFilters({
     confirm: true,
   });
diff --git a/web/ui/src/views/NodesView.vue b/web/ui/src/views/NodesView.vue
index 57f8ef0..c152e49 100644
--- a/web/ui/src/views/NodesView.vue
+++ b/web/ui/src/views/NodesView.vue
@@ -366,11 +366,15 @@ const state = reactive({
 });
 const searchInput = ref();
 const handleSearch = (selectedKeys, confirm, dataIndex) => {
+  filteredInfo[dataIndex] = selectedKeys
   confirm();
   state.searchText = selectedKeys[0];
   state.searchedColumn = dataIndex;
 };
 const handleReset = clearFilters => {
+  Object.keys(filteredInfo).forEach(key => {
+    delete filteredInfo[key];
+  });
   clearFilters({
     confirm: true,
   });
diff --git a/web/ui/src/views/RecordsView.vue b/web/ui/src/views/RecordsView.vue
index 95de045..9a2e3d2 100644
--- a/web/ui/src/views/RecordsView.vue
+++ b/web/ui/src/views/RecordsView.vue
@@ -234,11 +234,15 @@ const state = reactive({
 });
 const searchInput = ref();
 const handleSearch = (selectedKeys, confirm, dataIndex) => {
+  filteredInfo[dataIndex] = selectedKeys
   confirm();
   state.searchText = selectedKeys[0];
   state.searchedColumn = dataIndex;
 };
 const handleReset = clearFilters => {
+  Object.keys(filteredInfo).forEach(key => {
+    delete filteredInfo[key];
+  });
   clearFilters({
     confirm: true,
   });
diff --git a/web/ui/src/views/SpidersView.vue b/web/ui/src/views/SpidersView.vue
index 9ee640d..e4c5f63 100644
--- a/web/ui/src/views/SpidersView.vue
+++ b/web/ui/src/views/SpidersView.vue
@@ -424,11 +424,15 @@ const state = reactive({
 });
 const searchInput = ref();
 const handleSearch = (selectedKeys, confirm, dataIndex) => {
+  filteredInfo[dataIndex] = selectedKeys
   confirm();
   state.searchText = selectedKeys[0];
   state.searchedColumn = dataIndex;
 };
 const handleReset = clearFilters => {
+  Object.keys(filteredInfo).forEach(key => {
+    delete filteredInfo[key];
+  });
   clearFilters({
     confirm: true,
   });
diff --git a/web/ui/src/views/TasksView.vue b/web/ui/src/views/TasksView.vue
index 1034b88..4cc6a8b 100644
--- a/web/ui/src/views/TasksView.vue
+++ b/web/ui/src/views/TasksView.vue
@@ -303,11 +303,15 @@ const state = reactive({
 });
 const searchInput = ref();
 const handleSearch = (selectedKeys, confirm, dataIndex) => {
+  filteredInfo[dataIndex] = selectedKeys
   confirm();
   state.searchText = selectedKeys[0];
   state.searchedColumn = dataIndex;
 };
 const handleReset = clearFilters => {
+  Object.keys(filteredInfo).forEach(key => {
+    delete filteredInfo[key];
+  });
   clearFilters({
     confirm: true,
   });