@@ -78,15 +60,7 @@ export default defineComponent({
// 底部右侧区域 - 分页组件
footerRight: () => (
-
(
-
- {$t('t_15_1745227839354')} {data.value.total} {$t('t_16_1745227838930')}
-
- ),
- }}
- />
+
),
}}
diff --git a/frontend/apps/allin-ssl/src/views/monitor/useController.tsx b/frontend/apps/allin-ssl/src/views/monitor/useController.tsx
index 63d40c8..0cdb8b4 100644
--- a/frontend/apps/allin-ssl/src/views/monitor/useController.tsx
+++ b/frontend/apps/allin-ssl/src/views/monitor/useController.tsx
@@ -11,6 +11,7 @@ import {
useForm,
useFormHooks,
useLoadingMask,
+ useSearch,
} from '@baota/naive-ui/hooks'
import { useError } from '@baota/hooks/error'
import { isDomain, isPort, isIp } from '@baota/utils/business'
@@ -38,9 +39,10 @@ interface MonitorControllerExposes {
// 表格相关
TableComponent: ReturnType
['TableComponent']
PageComponent: ReturnType['PageComponent']
+ SearchComponent: ReturnType['SearchComponent']
loading: Ref
- param: Ref
- data: Ref<{ list: SiteMonitorItem[]; total: number }>
+ // param: Ref
+ // data: Ref<{ list: SiteMonitorItem[]; total: number }>
fetch: () => Promise
// 表单和操作相关
@@ -144,6 +146,24 @@ export const useController = (): MonitorControllerExposes => {
width: 150,
render: (row: SiteMonitorItem) => row.end_time + '(' + row.end_day + ')',
},
+ {
+ title: $t('上次异常时间'),
+ key: 'except_end_time',
+ width: 150,
+ render: (row: SiteMonitorItem) => row.except_end_time || '-',
+ },
+ {
+ title: $t('上次检查时间'),
+ key: 'last_time',
+ width: 150,
+ render: (row: SiteMonitorItem) => row.last_time || '-',
+ },
+ {
+ title: $t('更新时间'),
+ key: 'update_time',
+ width: 150,
+ render: (row: SiteMonitorItem) => row.update_time || '-',
+ },
{
title: $t('t_18_1745289354598'),
key: 'report_type',
@@ -160,12 +180,6 @@ export const useController = (): MonitorControllerExposes => {
return toggleStatus(row)} />
},
},
- {
- title: $t('t_19_1745289354676'),
- key: 'update_time',
- width: 150,
- render: (row: SiteMonitorItem) => row.update_time || '-',
- },
{
title: $t('t_7_1745215914189'),
key: 'create_time',
@@ -196,10 +210,7 @@ export const useController = (): MonitorControllerExposes => {
* 表格实例
* @description 创建表格实例并管理相关状态
*/
- const { TableComponent, PageComponent, loading, param, data, total, fetch } = useTable<
- SiteMonitorItem,
- SiteMonitorListParams
- >({
+ const { TableComponent, PageComponent, loading, param, fetch } = useTable({
config: createColumns(),
request: fetchMonitorList,
defaultValue: { p: 1, limit: 10, search: '' },
@@ -208,15 +219,13 @@ export const useController = (): MonitorControllerExposes => {
storage: 'monitorPageSize',
})
- // /**
- // * 分页实例
- // * @description 创建表格分页组件
- // */
- // const { component: MonitorTablePage } = useTablePage({
- // param,
- // total,
- // ,
- // })
+ // 搜索实例
+ const { SearchComponent } = useSearch({
+ onSearch: (value) => {
+ param.value.search = value
+ fetch()
+ },
+ })
/**
* 打开添加监控弹窗
@@ -297,9 +306,8 @@ export const useController = (): MonitorControllerExposes => {
fetch,
TableComponent,
PageComponent,
+ SearchComponent,
isDetectionAddMonitor,
- param,
- data,
openAddForm,
}
}
diff --git a/frontend/packages/vue/naive-ui/src/hooks/index.tsx b/frontend/packages/vue/naive-ui/src/hooks/index.tsx
index 3c1a115..279d7cf 100644
--- a/frontend/packages/vue/naive-ui/src/hooks/index.tsx
+++ b/frontend/packages/vue/naive-ui/src/hooks/index.tsx
@@ -1,5 +1,6 @@
import useForm, { useFormHooks } from './useForm' // 表单
import useTable, { useTableOperation } from './useTable' // 表格
+import useSearch from './useSearch' // 搜索
import useTabs from './useTabs' // 标签页
import useDialog from './useDialog' // 对话框
import useMessage from './useMessage' // 消息
@@ -21,6 +22,7 @@ import useFullScreen from './useFullScreen' // 全屏
export {
useForm,
useTable,
+ useSearch,
useTabs,
useDialog,
useMessage,
diff --git a/frontend/packages/vue/naive-ui/src/hooks/useSearch.tsx b/frontend/packages/vue/naive-ui/src/hooks/useSearch.tsx
new file mode 100644
index 0000000..53bdd20
--- /dev/null
+++ b/frontend/packages/vue/naive-ui/src/hooks/useSearch.tsx
@@ -0,0 +1,206 @@
+import { ref, computed, watch, VNode, isRef } from 'vue'
+import type { Ref } from 'vue'
+import { NInput, NIcon } from 'naive-ui'
+import { Search } from '@vicons/ionicons5'
+import { useTimeoutFn, useDebounceFn } from '@vueuse/core'
+
+/**
+ * 搜索回调函数类型
+ */
+export type SearchCallback = (value: string, isReset?: boolean) => void | Promise
+
+/**
+ * 搜索配置选项接口
+ */
+export interface UseSearchOptions {
+ /** 搜索回调函数 */
+ onSearch?: SearchCallback
+ /** 初始搜索值 */
+ value?: string | Ref
+ /** 输入框占位符文本 */
+ placeholder?: string
+ /** 清空搜索时的延迟时间(毫秒) */
+ clearDelay?: number
+ /** 输入框尺寸 */
+ size?: 'small' | 'medium' | 'large'
+ /** 是否可清空 */
+ clearable?: boolean
+ /** 自定义输入框类名 */
+ className?: string
+ /** 是否禁用 */
+ disabled?: boolean
+ /** 是否自动去除首尾空格 */
+ trim?: boolean
+ /** 输入时是否实时搜索 */
+ immediate?: boolean
+ /** 实时搜索的防抖延迟(毫秒) */
+ debounceDelay?: number
+}
+
+/**
+ * useSearch 返回值接口
+ */
+export interface UseSearchReturn {
+ /** 搜索值的响应式引用 */
+ value: Ref
+ /** 是否有搜索内容 */
+ hasSearchValue: Ref
+ /** 处理键盘事件的函数 */
+ handleKeydown: (event: KeyboardEvent) => void
+ /** 处理清空事件的函数 */
+ handleClear: () => void
+ /** 处理搜索图标点击事件的函数 */
+ handleSearchClick: () => void
+ /** 手动触发搜索的函数 */
+ search: (isReset?: boolean) => void
+ /** 防抖搜索函数 */
+ debouncedSearch: () => void
+ /** 清空搜索内容的函数 */
+ clear: () => void
+ /** 设置搜索值的函数 */
+ setValue: (value: string) => void
+ /** 渲染搜索输入框组件的函数 */
+ SearchComponent: (customProps?: Record) => VNode
+}
+
+/**
+ * 搜索功能的 hooks 函数
+ * @param options 搜索配置选项
+ * @returns 搜索相关的状态和方法
+ */
+export default function useSearch(options: UseSearchOptions = {}): UseSearchReturn {
+ const {
+ onSearch,
+ value = '',
+ placeholder = '请输入搜索内容',
+ clearDelay = 100,
+ size = 'large',
+ clearable = true,
+ className = 'min-w-[300px]',
+ disabled = false,
+ trim = true,
+ immediate = false,
+ debounceDelay = 300,
+ } = options
+
+ // 搜索值的响应式状态
+ const searchValue = isRef(value) ? value : ref