diff --git a/backend/app/api/v1/host.go b/backend/app/api/v1/host.go
index 623382c32..155f2d73c 100644
--- a/backend/app/api/v1/host.go
+++ b/backend/app/api/v1/host.go
@@ -95,7 +95,7 @@ func (b *BaseApi) TestByID(c *gin.Context) {
 // @Param request body dto.SearchForTree true "request"
 // @Success 200 {anrry} dto.HostTree
 // @Security ApiKeyAuth
-// @Router /hosts/search [post]
+// @Router /hosts/tree [post]
 func (b *BaseApi) HostTree(c *gin.Context) {
 	var req dto.SearchForTree
 	if err := c.ShouldBindJSON(&req); err != nil {
@@ -112,6 +112,33 @@ func (b *BaseApi) HostTree(c *gin.Context) {
 	helper.SuccessWithData(c, data)
 }
 
+// @Tags Host
+// @Summary Page host
+// @Description 获取主机列表分页
+// @Accept json
+// @Param request body dto.SearchHostWithPage true "request"
+// @Success 200 {anrry} dto.HostTree
+// @Security ApiKeyAuth
+// @Router /hosts/search [post]
+func (b *BaseApi) SearchHost(c *gin.Context) {
+	var req dto.SearchHostWithPage
+	if err := c.ShouldBindJSON(&req); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
+		return
+	}
+
+	total, list, err := hostService.SearchWithPage(req)
+	if err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
+
+	helper.SuccessWithData(c, dto.PageResult{
+		Items: list,
+		Total: total,
+	})
+}
+
 // @Tags Host
 // @Summary Load host info
 // @Description 加载主机信息
@@ -143,13 +170,13 @@ func (b *BaseApi) GetHostInfo(c *gin.Context) {
 // @Summary Delete host
 // @Description 删除主机
 // @Accept json
-// @Param request body dto.OperateByID true "request"
+// @Param request body dto.BatchDeleteReq true "request"
 // @Success 200
 // @Security ApiKeyAuth
 // @Router /hosts/del [post]
-// @x-panel-log {"bodyKeys":["id"],"paramKeys":[],"BeforeFuntions":[{"input_colume":"id","input_value":"id","isList":false,"db":"hosts","output_colume":"addr","output_value":"addr"}],"formatZH":"删除主机 [addr]","formatEN":"delete host [addr]"}
+// @x-panel-log {"bodyKeys":["ids"],"paramKeys":[],"BeforeFuntions":[{"input_colume":"id","input_value":"ids","isList":true,"db":"hosts","output_colume":"addr","output_value":"addrs"}],"formatZH":"删除主机 [addrs]","formatEN":"delete host [addrs]"}
 func (b *BaseApi) DeleteHost(c *gin.Context) {
-	var req dto.OperateByID
+	var req dto.BatchDeleteReq
 	if err := c.ShouldBindJSON(&req); err != nil {
 		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
 		return
@@ -159,7 +186,7 @@ func (b *BaseApi) DeleteHost(c *gin.Context) {
 		return
 	}
 
-	if err := hostService.Delete(req.ID); err != nil {
+	if err := hostService.Delete(req.Ids); err != nil {
 		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
 		return
 	}
@@ -202,3 +229,32 @@ func (b *BaseApi) UpdateHost(c *gin.Context) {
 	}
 	helper.SuccessWithData(c, nil)
 }
+
+// @Tags Host
+// @Summary Update host group
+// @Description 切换分组
+// @Accept json
+// @Param request body dto.ChangeHostGroup true "request"
+// @Success 200
+// @Security ApiKeyAuth
+// @Router /hosts/update [post]
+// @x-panel-log {"bodyKeys":["id","group"],"paramKeys":[],"BeforeFuntions":[{"input_colume":"id","input_value":"id","isList":false,"db":"hosts","output_colume":"addr","output_value":"addr"}],"formatZH":"切换主机[addr]分组 => [group]","formatEN":"change host [addr] group => [group]"}
+func (b *BaseApi) UpdateHostGroup(c *gin.Context) {
+	var req dto.ChangeHostGroup
+	if err := c.ShouldBindJSON(&req); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
+		return
+	}
+	if err := global.VALID.Struct(req); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
+		return
+	}
+
+	upMap := make(map[string]interface{})
+	upMap["group_belong"] = req.Group
+	if err := hostService.Update(req.ID, upMap); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
+	helper.SuccessWithData(c, nil)
+}
diff --git a/backend/app/dto/host.go b/backend/app/dto/host.go
index 2ed1d929f..8f07e3101 100644
--- a/backend/app/dto/host.go
+++ b/backend/app/dto/host.go
@@ -27,10 +27,21 @@ type HostConnTest struct {
 	Password   string `json:"password"`
 }
 
+type SearchHostWithPage struct {
+	PageInfo
+	Group string `json:"group"`
+	Info  string `json:"info"`
+}
+
 type SearchForTree struct {
 	Info string `json:"info"`
 }
 
+type ChangeHostGroup struct {
+	ID    uint   `json:"id" validate:"required"`
+	Group string `json:"group" validate:"required"`
+}
+
 type HostInfo struct {
 	ID          uint      `json:"id"`
 	CreatedAt   time.Time `json:"createdAt"`
diff --git a/backend/app/repo/host.go b/backend/app/repo/host.go
index de4d53bdd..8a5389d31 100644
--- a/backend/app/repo/host.go
+++ b/backend/app/repo/host.go
@@ -11,10 +11,12 @@ type HostRepo struct{}
 type IHostRepo interface {
 	Get(opts ...DBOption) (model.Host, error)
 	GetList(opts ...DBOption) ([]model.Host, error)
+	Page(limit, offset int, opts ...DBOption) (int64, []model.Host, error)
 	WithByInfo(info string) DBOption
 	WithByPort(port uint) DBOption
 	WithByUser(user string) DBOption
 	WithByAddr(addr string) DBOption
+	WithByGroup(group string) DBOption
 	Create(host *model.Host) error
 	ChangeGroup(oldGroup, newGroup string) error
 	Update(id uint, vars map[string]interface{}) error
@@ -45,6 +47,18 @@ func (u *HostRepo) GetList(opts ...DBOption) ([]model.Host, error) {
 	return hosts, err
 }
 
+func (u *HostRepo) Page(page, size int, opts ...DBOption) (int64, []model.Host, error) {
+	var users []model.Host
+	db := global.DB.Model(&model.Host{})
+	for _, opt := range opts {
+		db = opt(db)
+	}
+	count := int64(0)
+	db = db.Count(&count)
+	err := db.Limit(size).Offset(size * (page - 1)).Find(&users).Error
+	return count, users, err
+}
+
 func (c *HostRepo) WithByInfo(info string) DBOption {
 	return func(g *gorm.DB) *gorm.DB {
 		if len(info) == 0 {
@@ -70,6 +84,14 @@ func (u *HostRepo) WithByAddr(addr string) DBOption {
 		return g.Where("addr = ?", addr)
 	}
 }
+func (u *HostRepo) WithByGroup(group string) DBOption {
+	return func(g *gorm.DB) *gorm.DB {
+		if len(group) == 0 {
+			return g
+		}
+		return g.Where("group_belong = ?", group)
+	}
+}
 
 func (u *HostRepo) Create(host *model.Host) error {
 	return global.DB.Create(host).Error
diff --git a/backend/app/service/host.go b/backend/app/service/host.go
index a313351f6..81e9f0656 100644
--- a/backend/app/service/host.go
+++ b/backend/app/service/host.go
@@ -17,9 +17,10 @@ type IHostService interface {
 	TestLocalConn(id uint) bool
 	GetHostInfo(id uint) (*model.Host, error)
 	SearchForTree(search dto.SearchForTree) ([]dto.HostTree, error)
+	SearchWithPage(search dto.SearchHostWithPage) (int64, interface{}, error)
 	Create(hostDto dto.HostOperate) (*dto.HostInfo, error)
 	Update(id uint, upMap map[string]interface{}) error
-	Delete(id uint) error
+	Delete(id []uint) error
 }
 
 func NewIHostService() IHostService {
@@ -63,6 +64,22 @@ func (u *HostService) GetHostInfo(id uint) (*model.Host, error) {
 	return &host, err
 }
 
+func (u *HostService) SearchWithPage(search dto.SearchHostWithPage) (int64, interface{}, error) {
+	total, hosts, err := hostRepo.Page(search.Page, search.PageSize, hostRepo.WithByInfo(search.Info), hostRepo.WithByGroup(search.Group))
+	if err != nil {
+		return 0, nil, err
+	}
+	var dtoHosts []dto.HostInfo
+	for _, host := range hosts {
+		var item dto.HostInfo
+		if err := copier.Copy(&item, &host); err != nil {
+			return 0, nil, errors.WithMessage(constant.ErrStructTransform, err.Error())
+		}
+		dtoHosts = append(dtoHosts, item)
+	}
+	return total, dtoHosts, err
+}
+
 func (u *HostService) SearchForTree(search dto.SearchForTree) ([]dto.HostTree, error) {
 	hosts, err := hostRepo.GetList(hostRepo.WithByInfo(search.Info))
 	if err != nil {
@@ -136,15 +153,17 @@ func (u *HostService) Create(req dto.HostOperate) (*dto.HostInfo, error) {
 	return &hostinfo, nil
 }
 
-func (u *HostService) Delete(id uint) error {
-	host, _ := hostRepo.Get(commonRepo.WithByID(id))
-	if host.ID == 0 {
-		return constant.ErrRecordNotFound
+func (u *HostService) Delete(ids []uint) error {
+	hosts, _ := hostRepo.GetList(commonRepo.WithIdsIn(ids))
+	for _, host := range hosts {
+		if host.ID == 0 {
+			return constant.ErrRecordNotFound
+		}
+		if host.Addr == "127.0.0.1" {
+			return errors.New("the local connection information cannot be deleted!")
+		}
 	}
-	if host.Addr == "127.0.0.1" {
-		return errors.New("the local connection information cannot be deleted!")
-	}
-	return hostRepo.Delete(commonRepo.WithByID(id))
+	return hostRepo.Delete(commonRepo.WithIdsIn(ids))
 }
 
 func (u *HostService) Update(id uint, upMap map[string]interface{}) error {
diff --git a/backend/router/ro_host.go b/backend/router/ro_host.go
index 065d6f54c..f0439a256 100644
--- a/backend/router/ro_host.go
+++ b/backend/router/ro_host.go
@@ -19,7 +19,9 @@ func (s *HostRouter) InitHostRouter(Router *gin.RouterGroup) {
 		hostRouter.POST("", baseApi.CreateHost)
 		hostRouter.POST("/del", baseApi.DeleteHost)
 		hostRouter.POST("/update", baseApi.UpdateHost)
-		hostRouter.POST("/search", baseApi.HostTree)
+		hostRouter.POST("/update/group", baseApi.UpdateHostGroup)
+		hostRouter.POST("/search", baseApi.SearchHost)
+		hostRouter.POST("/tree", baseApi.HostTree)
 		hostRouter.POST("/test/byinfo", baseApi.TestByInfo)
 		hostRouter.POST("/test/byid/:id", baseApi.TestByID)
 		hostRouter.GET(":id", baseApi.GetHostInfo)
diff --git a/frontend/src/api/interface/host.ts b/frontend/src/api/interface/host.ts
index 2f0e256a4..4023dbae6 100644
--- a/frontend/src/api/interface/host.ts
+++ b/frontend/src/api/interface/host.ts
@@ -1,4 +1,4 @@
-import { CommonModel } from '.';
+import { CommonModel, ReqPage } from '.';
 
 export namespace Host {
     export interface HostTree {
@@ -40,7 +40,15 @@ export namespace Host {
         privateKey: string;
         password: string;
     }
+    export interface GroupChange {
+        id: number;
+        group: string;
+    }
     export interface ReqSearch {
         info?: string;
     }
+    export interface SearchWithPage extends ReqPage {
+        group: string;
+        info?: string;
+    }
 }
diff --git a/frontend/src/api/modules/host.ts b/frontend/src/api/modules/host.ts
index 219dade4f..8e7997f1d 100644
--- a/frontend/src/api/modules/host.ts
+++ b/frontend/src/api/modules/host.ts
@@ -4,8 +4,11 @@ import { Command } from '../interface/command';
 import { Group } from '../interface/group';
 import { Host } from '../interface/host';
 
+export const searchHosts = (params: Host.SearchWithPage) => {
+    return http.post<ResPage<Host.Host>>(`/hosts/search`, params);
+};
 export const getHostTree = (params: Host.ReqSearch) => {
-    return http.post<Array<Host.HostTree>>(`/hosts/search`, params);
+    return http.post<Array<Host.HostTree>>(`/hosts/tree`, params);
 };
 export const getHostInfo = (id: number) => {
     return http.get<Host.Host>(`/hosts/` + id);
@@ -22,8 +25,11 @@ export const testByID = (id: number) => {
 export const editHost = (params: Host.HostOperate) => {
     return http.post(`/hosts/update`, params);
 };
-export const deleteHost = (id: number) => {
-    return http.post(`/hosts/del`, { id: id });
+export const editHostGroup = (params: Host.GroupChange) => {
+    return http.post(`/hosts/update/group`, params);
+};
+export const deleteHost = (params: { ids: number[] }) => {
+    return http.post(`/hosts/del`, params);
 };
 
 // group
diff --git a/frontend/src/global/form-rules.ts b/frontend/src/global/form-rules.ts
index d26e8c085..5844246be 100644
--- a/frontend/src/global/form-rules.ts
+++ b/frontend/src/global/form-rules.ts
@@ -19,7 +19,7 @@ const complexityPassword = (rule: any, value: any, callback: any) => {
     if (value === '' || typeof value === 'undefined' || value == null) {
         callback(new Error(i18n.global.t('commons.rule.complexityPassword')));
     } else {
-        const reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*.])[\da-zA-Z~!@#$%^&*.]{8,}$/;
+        const reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*.-_])[\da-zA-Z~!@#$%^&*.-_]{8,}$/;
         if (!reg.test(value) && value !== '') {
             callback(new Error(i18n.global.t('commons.rule.complexityPassword')));
         } else {
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index b5a86ee03..77cd65e80 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -126,7 +126,7 @@ export default {
             imageName: 'Support English, Chinese, numbers, :.-_, length 1-30',
             volumeName: 'Support English, numbers, .-_, length 1-30',
             complexityPassword:
-                'Please enter a password with more than 8 characters and must contain letters, digits, and special symbols',
+                'Please enter a password with more than 8 characters and must contain letters, digits, and special symbols(~!@#$%^&*.-_)',
             commonPassword: 'Please enter a password with more than 6 characters',
             email: 'Email format error',
             number: 'Please enter the correct number',
@@ -606,9 +606,10 @@ export default {
         saveAndConn: 'Save and Connect',
         connTestOk: 'Connection information available',
         connTestFailed: 'Connection unavailable, please check connection information!',
-        hostList: 'Host information',
+        host: 'Host',
         createConn: 'Create a connection',
-        createGroup: 'Create a group',
+        group: 'Group',
+        groupChange: 'Change group',
         expand: 'Expand all',
         fold: 'All contract',
         batchInput: 'Batch input',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index dee7ec582..7f4983c0d 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -130,7 +130,7 @@ export default {
             dbName: '支持英文、中文、数字、.-_,长度1-16',
             imageName: '支持英文、中文、数字、:.-_,长度1-30',
             volumeName: '支持英文、数字、.-和_,长度1-30',
-            complexityPassword: '请输入 8 位以上、必须含有字母、数字、特殊符号的密码',
+            complexityPassword: '请输入 8 位以上、必须含有字母、数字、特殊符号(~!@#$%^&*.-_)的密码',
             commonPassword: '请输入 6 位以上长度密码',
             linuxName: '长度1-30，名称不能含有{0}等符号',
             email: '请输入正确的邮箱',
@@ -615,9 +615,10 @@ export default {
         saveAndConn: '保存并连接',
         connTestOk: '连接信息可用',
         connTestFailed: '连接不可用，请检查连接信息！',
-        hostList: '主机信息',
+        host: '主机',
         createConn: '新建连接',
-        createGroup: '创建分组',
+        group: '分组',
+        groupChange: '切换分组',
         expand: '全部展开',
         fold: '全部收缩',
         batchInput: '批量输入',
diff --git a/frontend/src/views/cronjob/operate/index.vue b/frontend/src/views/cronjob/operate/index.vue
index 5413037c4..51bc9af57 100644
--- a/frontend/src/views/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/operate/index.vue
@@ -3,7 +3,7 @@
         <template #header>
             <DrawerHeader :header="$t('cronjob.cronTask')" :back="handleClose" />
         </template>
-        <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules" label-width="120px">
+        <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules">
             <el-row type="flex" justify="center">
                 <el-col :span="22">
                     <el-form-item :label="$t('cronjob.taskType')" prop="type">
diff --git a/frontend/src/views/host/terminal/host/change-group/index.vue b/frontend/src/views/host/terminal/host/change-group/index.vue
new file mode 100644
index 000000000..a3344ddc3
--- /dev/null
+++ b/frontend/src/views/host/terminal/host/change-group/index.vue
@@ -0,0 +1,98 @@
+<template>
+    <div v-loading="loading">
+        <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
+            <template #header>
+                <DrawerHeader :header="$t('terminal.groupChange')" :back="handleClose" />
+            </template>
+            <el-row type="flex" justify="center">
+                <el-col :span="22">
+                    <el-form ref="hostInfoRef" label-position="top" :model="dialogData" :rules="rules">
+                        <el-form-item :label="$t('commons.table.group')" prop="group">
+                            <el-select filterable v-model="dialogData.group" clearable style="width: 100%">
+                                <el-option
+                                    v-for="item in groupList"
+                                    :key="item.id"
+                                    :label="item.name"
+                                    :value="item.name"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button type="primary" @click="onSubmit(hostInfoRef)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import type { ElForm } from 'element-plus';
+import { Rules } from '@/global/form-rules';
+import { editHostGroup, getGroupList } from '@/api/modules/host';
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+
+const loading = ref();
+interface DialogProps {
+    id: number;
+    group: string;
+}
+const drawerVisiable = ref(false);
+const dialogData = ref<DialogProps>({
+    id: 0,
+    group: '',
+});
+
+const groupList = ref();
+const acceptParams = (params: DialogProps): void => {
+    dialogData.value = params;
+    drawerVisiable.value = true;
+    loadGroups();
+};
+const emit = defineEmits<{ (e: 'search'): void }>();
+
+const handleClose = () => {
+    drawerVisiable.value = false;
+};
+
+type FormInstance = InstanceType<typeof ElForm>;
+const hostInfoRef = ref<FormInstance>();
+const rules = reactive({
+    group: [Rules.requiredSelect],
+});
+
+const loadGroups = async () => {
+    const res = await getGroupList({ type: 'host' });
+    groupList.value = res.data;
+};
+
+const onSubmit = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.validate(async (valid) => {
+        if (!valid) return;
+        loading.value = true;
+        await editHostGroup(dialogData.value)
+            .then(() => {
+                loading.value = false;
+                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                drawerVisiable.value = false;
+                emit('search');
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    });
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>
diff --git a/frontend/src/views/host/terminal/host/group/index.vue b/frontend/src/views/host/terminal/host/group/index.vue
new file mode 100644
index 000000000..abaf5223b
--- /dev/null
+++ b/frontend/src/views/host/terminal/host/group/index.vue
@@ -0,0 +1,183 @@
+<template>
+    <el-drawer :close-on-click-modal="false" v-model="drawerVisiable" size="50%" :before-close="handleClose">
+        <template #header>
+            <Header :header="$t('website.group')" :back="handleClose"></Header>
+        </template>
+
+        <ComplexTable v-loading="loading" :data="data" @search="search()">
+            <template #toolbar>
+                <el-button type="primary" @click="openCreate">{{ $t('website.createGroup') }}</el-button>
+            </template>
+            <el-table-column :label="$t('commons.table.name')" prop="name">
+                <template #default="{ row }">
+                    <span v-if="!row.edit">
+                        {{ row.name }}
+                    </span>
+                    <el-input v-if="row.edit" v-model="row.name"></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('commons.table.operate')">
+                <template #default="{ row, $index }">
+                    <div>
+                        <el-button link v-if="row.edit" type="primary" @click="onSaveGroup(row)">
+                            {{ $t('commons.button.save') }}
+                        </el-button>
+                        <el-button
+                            link
+                            v-if="!row.edit"
+                            :disabled="row.name === 'default'"
+                            type="primary"
+                            @click="onEditGroup($index)"
+                        >
+                            {{ $t('commons.button.edit') }}
+                        </el-button>
+                        <el-button
+                            link
+                            v-if="!row.edit"
+                            :disabled="row.name === 'default'"
+                            type="primary"
+                            @click="onDeleteGroup($index)"
+                        >
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
+                        <el-button link v-if="row.edit" type="primary" @click="cancelEdit($index)">
+                            {{ $t('commons.button.cancel') }}
+                        </el-button>
+                    </div>
+                </template>
+            </el-table-column>
+        </ComplexTable>
+    </el-drawer>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import i18n from '@/lang';
+import ComplexTable from '@/components/complex-table/index.vue';
+import Header from '@/components/drawer-header/index.vue';
+import { MsgSuccess } from '@/utils/message';
+import { addGroup, deleteGroup, editGroup, getGroupList } from '@/api/modules/host';
+import { useDeleteData } from '@/hooks/use-delete-data';
+
+const loading = ref();
+
+interface groupData {
+    id: number;
+    name: string;
+}
+
+let drawerVisiable = ref(false);
+let data = ref();
+const handleClose = () => {
+    drawerVisiable.value = false;
+    data.value = [];
+    emit('search');
+};
+
+const search = () => {
+    data.value = [];
+    getGroupList({ type: 'host' }).then((res) => {
+        for (const d of res.data) {
+            const g = {
+                id: d.id,
+                name: d.name,
+                edit: false,
+            };
+            data.value.push(g);
+        }
+    });
+};
+
+const onSaveGroup = (create: groupData) => {
+    const group = {
+        id: create.id,
+        type: 'host',
+        name: create.name,
+    };
+    loading.value = true;
+    if (group.id == 0) {
+        addGroup(group)
+            .then(() => {
+                loading.value = false;
+                MsgSuccess(i18n.global.t('commons.msg.createSuccess'));
+                search();
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    } else {
+        editGroup(group)
+            .then(() => {
+                loading.value = false;
+                MsgSuccess(i18n.global.t('commons.msg.updateSuccess'));
+                search();
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    }
+};
+
+const acceptParams = async () => {
+    drawerVisiable.value = true;
+    search();
+};
+const emit = defineEmits<{ (e: 'search'): void }>();
+
+const openCreate = () => {
+    for (const d of data.value) {
+        if (d.name == '') {
+            return;
+        }
+        if (d.edit) {
+            d.edit = false;
+        }
+    }
+    const g = {
+        id: 0,
+        type: 'host',
+        name: '',
+        edit: true,
+    };
+    data.value.push(g);
+};
+
+const onDeleteGroup = async (index: number) => {
+    const group = data.value[index];
+    if (group.id > 0) {
+        await useDeleteData(deleteGroup, group.id, 'terminal.groupDeleteHelper')
+            .then(() => {
+                loading.value = false;
+                search();
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    } else {
+        data.value.splice(index, 1);
+    }
+};
+
+const onEditGroup = (index: number) => {
+    for (const i in data.value) {
+        const d = data.value[i];
+        if (d.name == '') {
+            data.value.splice(Number(i), 1);
+        }
+        if (d.edit) {
+            d.edit = false;
+        }
+    }
+    data.value[index].edit = true;
+};
+
+const cancelEdit = (index: number) => {
+    if (data.value[index].id == 0) {
+        data.value.splice(index, 1);
+    } else {
+        data.value[index].edit = false;
+    }
+    search();
+};
+
+defineExpose({ acceptParams });
+</script>
diff --git a/frontend/src/views/host/terminal/host/index.vue b/frontend/src/views/host/terminal/host/index.vue
index 7916205f5..9b599451f 100644
--- a/frontend/src/views/host/terminal/host/index.vue
+++ b/frontend/src/views/host/terminal/host/index.vue
@@ -1,239 +1,140 @@
 <template>
     <div>
-        <el-row class="row-box" style="margin-top: 20px" :gutter="20">
-            <el-col :span="8">
-                <el-card class="el-card">
-                    <el-tooltip
-                        class="box-item"
-                        effect="dark"
-                        :content="$t('terminal.createConn')"
-                        placement="top-start"
-                    >
-                        <el-button icon="Plus" @click="restHostForm" />
-                    </el-tooltip>
-                    <el-tooltip
-                        class="box-item"
-                        effect="dark"
-                        :content="$t('terminal.createGroup')"
-                        placement="top-start"
-                    >
-                        <el-button icon="FolderAdd" @click="onGroupCreate" />
-                    </el-tooltip>
-                    <el-tooltip class="box-item" effect="dark" :content="$t('terminal.expand')" placement="top-start">
-                        <el-button icon="Expand" @click="setTreeStatus(true)" />
-                    </el-tooltip>
-                    <el-tooltip class="box-item" effect="dark" :content="$t('terminal.fold')" placement="top-start">
-                        <el-button icon="Fold" @click="setTreeStatus(false)" />
-                    </el-tooltip>
-                    <el-input @input="loadHostTree" clearable style="margin-top: 5px" v-model="searcConfig.info">
-                        <template #append><el-button icon="search" @click="loadHostTree" /></template>
-                    </el-input>
-                    <el-input v-if="groupInputShow" clearable style="margin-top: 5px" v-model="groupInputValue">
-                        <template #append>
-                            <el-button-group>
-                                <el-button icon="Check" @click="onCreateGroup(groupInputValue)" />
-                                <el-button icon="Close" @click="groupInputShow = false" />
-                            </el-button-group>
+        <LayoutContent v-loading="loading" :title="$t('terminal.host')">
+            <template #toolbar>
+                <el-row>
+                    <el-col :span="20">
+                        <el-button type="primary" @click="onOpenDialog('create')">
+                            {{ $t('terminal.addHost') }}
+                        </el-button>
+                        <el-button type="primary" plain @click="onOpenGroupDialog()">
+                            {{ $t('terminal.group') }}
+                        </el-button>
+                        <el-button type="primary" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
+                    </el-col>
+                    <el-col :span="4">
+                        <div class="search-button">
+                            <el-input
+                                v-model="info"
+                                clearable
+                                @clear="search()"
+                                suffix-icon="Search"
+                                @keyup.enter="search()"
+                                @blur="search()"
+                                :placeholder="$t('commons.button.search')"
+                            ></el-input>
+                        </div>
+                    </el-col>
+                </el-row>
+            </template>
+            <template #search>
+                <el-select v-model="group" @change="search()" clearable>
+                    <template #prefix>{{ $t('terminal.group') }}</template>
+                    <el-option v-for="item in groupList" :key="item.name" :value="item.name" :label="item.name" />
+                </el-select>
+            </template>
+            <template #main>
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    v-model:selects="selects"
+                    :data="data"
+                    @search="search"
+                >
+                    <el-table-column type="selection" :selectable="selectable" fix />
+                    <el-table-column :label="$t('commons.table.name')" prop="name" fix>
+                        <template #default="{ row }">
+                            <span v-if="row.addr === '127.0.0.1'">{{ $t('terminal.localhost') }}</span>
+                            <span v-else>{{ row.name }}</span>
                         </template>
-                    </el-input>
-                    <el-tree
-                        ref="tree"
-                        :expand-on-click-node="false"
-                        node-key="id"
-                        :default-expand-all="true"
-                        :data="hostTree"
-                        :props="defaultProps"
-                    >
-                        <template #default="{ node, data }">
-                            <span class="custom-tree-node" @mouseover="hover = data.id" @mouseleave="hover = null">
-                                <div v-if="node.label !== currentGroup || !data.onEdit">
-                                    <span v-if="node.label.length <= 35" @click="onEdit(node, data)">
-                                        {{ node.label }}
-                                    </span>
-                                    <el-tooltip v-else :content="node.label" placement="top-start">
-                                        <span>{{ node.label.substring(0, 32) }}...</span>
-                                    </el-tooltip>
-                                </div>
-                                <el-input v-else v-model="currentGroupValue"></el-input>
-                                <div
-                                    style="margin-left: 10px"
-                                    v-if="!(node.level === 1 && data.label === 'default') && data.id === hover"
-                                >
-                                    <el-button v-if="!data.onEdit" icon="Edit" link @click="onEdit(node, data)" />
-                                    <el-button
-                                        v-if="!data.onEdit && node.label.indexOf('@127.0.0.1:') === -1"
-                                        icon="Delete"
-                                        link
-                                        @click="onDelete(node, data)"
-                                    />
-                                    <el-button v-if="data.onEdit" icon="Check" link @click="onUpdateGroup()" />
-                                    <el-button v-if="data.onEdit" icon="Close" link @click="data.onEdit = false" />
-                                </div>
-                            </span>
-                        </template>
-                    </el-tree>
-                </el-card>
-            </el-col>
-            <el-col :span="16">
-                <el-card class="el-card">
-                    <el-form ref="hostInfoRef" label-width="100px" :model="hostInfo" :rules="rules">
-                        <el-form-item :label="$t('terminal.ip')" prop="addr">
-                            <span v-if="hostInfo.addr === '127.0.0.1' && hostOperation === 'edit'">
-                                {{ hostInfo.addr }}
-                            </span>
-                            <el-input v-else clearable v-model="hostInfo.addr" />
-                        </el-form-item>
-                        <el-form-item :label="$t('terminal.user')" prop="user">
-                            <el-input clearable v-model="hostInfo.user" />
-                        </el-form-item>
-                        <el-form-item :label="$t('terminal.authMode')" prop="authMode">
-                            <el-radio-group v-model="hostInfo.authMode">
-                                <el-radio label="password">{{ $t('terminal.passwordMode') }}</el-radio>
-                                <el-radio label="key">{{ $t('terminal.keyMode') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('terminal.password')"
-                            v-if="hostInfo.authMode === 'password'"
-                            prop="password"
-                        >
-                            <el-input clearable show-password type="password" v-model="hostInfo.password" />
-                        </el-form-item>
-                        <el-form-item :label="$t('terminal.key')" v-if="hostInfo.authMode === 'key'" prop="privateKey">
-                            <el-input clearable type="textarea" v-model="hostInfo.privateKey" />
-                        </el-form-item>
-                        <el-form-item :label="$t('terminal.port')" prop="port">
-                            <el-input clearable v-model.number="hostInfo.port" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.group')" prop="groupBelong">
-                            <el-select filterable v-model="hostInfo.groupBelong" clearable style="width: 100%">
-                                <el-option
-                                    v-for="item in groupList"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.name"
-                                />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.title')" prop="name">
-                            <el-input clearable v-model="hostInfo.name" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.description')" prop="description">
-                            <el-input clearable type="textarea" v-model="hostInfo.description" />
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button @click="restHostForm">
-                                {{ $t('commons.button.reset') }}
-                            </el-button>
-                            <el-button @click="submitAddHost(hostInfoRef, 'testconn')">
-                                {{ $t('terminal.testConn') }}
-                            </el-button>
-                            <el-button
-                                v-if="hostOperation === 'create'"
-                                type="primary"
-                                @click="submitAddHost(hostInfoRef, 'create')"
-                            >
-                                {{ $t('commons.button.save') }}
-                            </el-button>
-                            <el-button
-                                v-if="hostOperation === 'edit'"
-                                type="primary"
-                                @click="submitAddHost(hostInfoRef, 'edit')"
-                            >
-                                {{ $t('commons.button.confirm') }}
-                            </el-button>
-                        </el-form-item>
-                    </el-form>
-                </el-card>
-            </el-col>
-        </el-row>
+                    </el-table-column>
+                    <el-table-column :label="$t('commons.table.group')" show-overflow-tooltip prop="groupBelong" />
+                    <el-table-column :label="$t('terminal.ip')">
+                        <template #default="{ row }">{{ row.addr }}:{{ row.port }}</template>
+                    </el-table-column>
+                    <el-table-column :label="$t('terminal.user')" show-overflow-tooltip prop="user" />
+                    <el-table-column
+                        :label="$t('commons.table.description')"
+                        show-overflow-tooltip
+                        prop="description"
+                    />
+                    <fu-table-operations width="200px" :buttons="buttons" :label="$t('commons.table.operate')" fix />
+                </ComplexTable>
+            </template>
+        </LayoutContent>
+
+        <OperateDialog @search="search" ref="dialogRef" />
+        <GroupDialog @search="search" ref="dialogGroupRef" />
+        <GroupChangeDialog @search="search" ref="dialogGroupChangeRef" />
     </div>
 </template>
 
-<script lang="ts" setup>
-import { ref, reactive } from 'vue';
-import type { ElForm } from 'element-plus';
-import { Rules } from '@/global/form-rules';
-import { Host } from '@/api/interface/host';
-import { Group } from '@/api/interface/group';
-import {
-    getHostTree,
-    getHostInfo,
-    addHost,
-    editHost,
-    deleteHost,
-    testByInfo,
-    getGroupList,
-    addGroup,
-    editGroup,
-    deleteGroup,
-} from '@/api/modules/host';
-import { useDeleteData } from '@/hooks/use-delete-data';
+<script setup lang="ts">
+import LayoutContent from '@/layout/layout-content.vue';
+import GroupDialog from '@/views/host/terminal/host/group/index.vue';
+import GroupChangeDialog from '@/views/host/terminal/host/change-group/index.vue';
+import OperateDialog from '@/views/host/terminal/host/operate/index.vue';
+import ComplexTable from '@/components/complex-table/index.vue';
+import { deleteHost, getGroupList, searchHosts } from '@/api/modules/host';
+import { reactive, ref } from 'vue';
 import i18n from '@/lang';
-import type Node from 'element-plus/es/components/tree/src/model/node';
-import { MsgSuccess } from '@/utils/message';
+import { Host } from '@/api/interface/host';
+import { useDeleteData } from '@/hooks/use-delete-data';
 
-type FormInstance = InstanceType<typeof ElForm>;
-const hostInfoRef = ref<FormInstance>();
-const rules = reactive({
-    groupBelong: [Rules.requiredSelect],
-    addr: [Rules.requiredInput],
-    port: [Rules.requiredInput, Rules.port],
-    user: [Rules.requiredInput],
-    authMode: [Rules.requiredSelect],
-    password: [Rules.requiredInput],
-    privateKey: [Rules.requiredInput],
+const loading = ref();
+const data = ref();
+const groupList = ref();
+const selects = ref<any>([]);
+const paginationConfig = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0,
 });
-let hostOperation = ref<string>('create');
-let hostInfo = reactive<Host.HostOperate>({
-    id: 0,
-    name: '',
-    groupBelong: 'default',
-    addr: '',
-    port: 22,
-    user: '',
-    authMode: 'password',
-    password: '',
-    privateKey: '',
-    description: '',
-});
-
-interface Tree {
-    id: number;
-    label: string;
-    children?: Tree[];
-    onEdit: boolean;
-}
-
-let searcConfig = reactive<Host.ReqSearch>({
-    info: '',
-});
-const tree = ref<any>(null);
-const hover = ref();
-const hostTree = ref<Array<Host.HostTree>>();
-const defaultProps = {
-    label: 'label',
-    children: 'children',
-};
-
-const groupList = ref<Array<Group.GroupInfo>>();
-
-const groupInputValue = ref();
-const currentGroup = ref();
-const currentGroupID = ref();
-const currentGroupValue = ref();
-
-let groupOperation = ref<string>('create');
-let groupInputShow = ref<boolean>(false);
-
-const loadHostTree = async () => {
-    const res = await getHostTree(searcConfig);
-    hostTree.value = res.data;
-};
+const info = ref();
+const group = ref();
+const dialogGroupChangeRef = ref();
 
 const acceptParams = () => {
-    loadHostTree();
-    loadGroups();
+    search();
+};
+
+function selectable(row) {
+    return row.addr !== '127.0.0.1';
+}
+const dialogRef = ref();
+const onOpenDialog = async (
+    title: string,
+    rowData: Partial<Host.Host> = {
+        groupBelong: 'default',
+        port: 22,
+        user: 'root',
+        authMode: 'password',
+    },
+) => {
+    let params = {
+        title,
+        rowData: { ...rowData },
+    };
+    dialogRef.value!.acceptParams(params);
+};
+
+const dialogGroupRef = ref();
+const onOpenGroupDialog = () => {
+    dialogGroupRef.value!.acceptParams();
+};
+
+const onBatchDelete = async (row: Host.Host | null) => {
+    let ids: Array<number> = [];
+    if (row) {
+        ids.push(row.id);
+    } else {
+        selects.value.forEach((item: Host.Host) => {
+            ids.push(item.id);
+        });
+    }
+    await useDeleteData(deleteHost, { ids: ids }, 'commons.msg.delete');
+    search();
 };
 
 const loadGroups = async () => {
@@ -241,129 +142,54 @@ const loadGroups = async () => {
     groupList.value = res.data;
 };
 
-function setTreeStatus(expend: boolean) {
-    for (let i = 0; i < tree.value.store._getAllNodes().length; i++) {
-        tree.value.store._getAllNodes()[i].expanded = expend;
-    }
-}
+const buttons = [
+    {
+        label: i18n.global.t('terminal.groupChange'),
+        click: (row: any) => {
+            dialogGroupChangeRef.value!.acceptParams({ id: row.id, group: row.groupBelong });
+        },
+        disabled: (row: any) => {
+            return row.addr === '127.0.0.1';
+        },
+    },
+    {
+        label: i18n.global.t('commons.button.edit'),
+        click: (row: any) => {
+            onOpenDialog('edit', row);
+        },
+    },
+    {
+        label: i18n.global.t('commons.button.delete'),
+        click: (row: Host.Host) => {
+            onBatchDelete(row);
+        },
+        disabled: (row: any) => {
+            return row.addr === '127.0.0.1';
+        },
+    },
+];
 
-function restHostForm() {
-    if (hostInfoRef.value) {
-        hostInfoRef.value.resetFields();
-    }
-}
-
-const submitAddHost = (formEl: FormInstance | undefined, ops: string) => {
-    if (!formEl) return;
-    formEl.validate(async (valid) => {
-        if (!valid) return;
-        switch (ops) {
-            case 'create':
-                await addHost(hostInfo);
-                restHostForm();
-                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                loadHostTree();
-                break;
-            case 'edit':
-                await editHost(hostInfo);
-                restHostForm();
-                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                loadHostTree();
-                break;
-            case 'testconn':
-                await testByInfo(hostInfo).then((res) => {
-                    if (res.data) {
-                        MsgSuccess(i18n.global.t('terminal.connTestOk'));
-                    } else {
-                        MsgSuccess(i18n.global.t('terminal.connTestFailed'));
-                    }
-                });
-                break;
-        }
-    });
-};
-
-const onGroupCreate = () => {
-    groupInputShow.value = true;
-    groupInputValue.value = '';
-    groupOperation.value = 'create';
-};
-const onCreateGroup = async (name: string) => {
-    if (groupOperation.value === 'create') {
-        let group = { id: 0, name: name, type: 'host' };
-        await addGroup(group);
-        groupOperation.value = '';
-        groupInputShow.value = false;
-    }
-    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-    groupOperation.value = '';
-    groupInputShow.value = false;
-    loadHostTree();
+const search = async () => {
+    let params = {
+        page: paginationConfig.currentPage,
+        pageSize: paginationConfig.pageSize,
+        group: group.value,
+        info: info.value,
+    };
     loadGroups();
-};
-
-const onUpdateGroup = async () => {
-    if (currentGroup.value === currentGroupValue.value) {
-        currentGroup.value = '';
-        return;
-    }
-    let group = { id: currentGroupID.value, name: currentGroupValue.value, type: 'host' };
-    await editGroup(group);
-    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-    loadHostTree();
-    loadGroups();
-};
-
-const onDelete = async (node: Node, data: Tree) => {
-    if (node.level === 1 && data.label === 'default') {
-        return;
-    }
-    if (node.level === 1) {
-        await useDeleteData(deleteGroup, data.id - 10000, 'terminal.groupDeleteHelper');
-        loadGroups();
-    } else {
-        await useDeleteData(deleteHost, data.id, 'commons.msg.delete');
-    }
-    loadHostTree();
-    loadGroups();
-};
-
-const onEdit = async (node: Node, data: Tree) => {
-    if (node.level === 1 && data.label === 'default') {
-        return;
-    }
-    if (node.level === 1) {
-        currentGroup.value = data.label;
-        currentGroupValue.value = data.label;
-        currentGroupID.value = data.id - 10000;
-        groupOperation.value = 'edit';
-        data.onEdit = true;
-        return;
-    } else {
-        const res = await getHostInfo(data.id);
-        hostInfo.id = res.data.id;
-        hostInfo.name = res.data.name;
-        hostInfo.groupBelong = res.data.groupBelong;
-        hostInfo.addr = res.data.addr;
-        hostInfo.port = res.data.port;
-        hostInfo.user = res.data.user;
-        hostInfo.description = res.data.description;
-        hostOperation.value = 'edit';
-    }
+    loading.value = true;
+    await searchHosts(params)
+        .then((res) => {
+            loading.value = false;
+            data.value = res.data.items || [];
+            paginationConfig.total = res.data.total;
+        })
+        .catch(() => {
+            loading.value = false;
+        });
 };
 
 defineExpose({
     acceptParams,
 });
 </script>
-
-<style>
-.custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding-right: 8px;
-}
-</style>
diff --git a/frontend/src/views/host/terminal/host/operate/index.vue b/frontend/src/views/host/terminal/host/operate/index.vue
new file mode 100644
index 000000000..ca21c0fcb
--- /dev/null
+++ b/frontend/src/views/host/terminal/host/operate/index.vue
@@ -0,0 +1,177 @@
+<template>
+    <div v-loading="loading">
+        <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
+            <template #header>
+                <DrawerHeader :header="$t('terminal.host')" :back="handleClose" />
+            </template>
+            <el-row type="flex" justify="center">
+                <el-col :span="22">
+                    <el-form ref="hostInfoRef" label-position="top" :model="dialogData.rowData" :rules="rules">
+                        <el-form-item :label="$t('terminal.ip')" prop="addr">
+                            <span v-if="dialogData.rowData!.addr === '127.0.0.1' && dialogData.title === 'edit'">
+                                {{ dialogData.rowData!.addr }}
+                            </span>
+                            <el-input v-else clearable v-model="dialogData.rowData!.addr" />
+                        </el-form-item>
+                        <el-form-item :label="$t('terminal.user')" prop="user">
+                            <el-input clearable v-model="dialogData.rowData!.user" />
+                        </el-form-item>
+                        <el-form-item :label="$t('terminal.authMode')" prop="authMode">
+                            <el-radio-group v-model="dialogData.rowData!.authMode">
+                                <el-radio label="password">{{ $t('terminal.passwordMode') }}</el-radio>
+                                <el-radio label="key">{{ $t('terminal.keyMode') }}</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item
+                            :label="$t('terminal.password')"
+                            v-if="dialogData.rowData!.authMode === 'password'"
+                            prop="password"
+                        >
+                            <el-input clearable show-password type="password" v-model="dialogData.rowData!.password" />
+                        </el-form-item>
+                        <el-form-item
+                            :label="$t('terminal.key')"
+                            v-if="dialogData.rowData!.authMode === 'key'"
+                            prop="privateKey"
+                        >
+                            <el-input clearable type="textarea" v-model="dialogData.rowData!.privateKey" />
+                        </el-form-item>
+                        <el-form-item :label="$t('terminal.port')" prop="port">
+                            <el-input clearable v-model.number="dialogData.rowData!.port" />
+                        </el-form-item>
+                        <el-form-item :label="$t('commons.table.group')" prop="groupBelong">
+                            <el-select
+                                filterable
+                                v-model="dialogData.rowData!.groupBelong"
+                                clearable
+                                style="width: 100%"
+                            >
+                                <el-option
+                                    v-for="item in groupList"
+                                    :key="item.id"
+                                    :label="item.name"
+                                    :value="item.name"
+                                />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item :label="$t('commons.table.title')" prop="name">
+                            <el-input clearable v-model="dialogData.rowData!.name" />
+                        </el-form-item>
+                        <el-form-item :label="$t('commons.table.description')" prop="description">
+                            <el-input clearable type="textarea" v-model="dialogData.rowData!.description" />
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button @click="submitAddHost(hostInfoRef, 'testconn')">
+                        {{ $t('terminal.testConn') }}
+                    </el-button>
+                    <el-button type="primary" @click="submitAddHost(hostInfoRef, dialogData.title)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import type { ElForm } from 'element-plus';
+import { Rules } from '@/global/form-rules';
+import { addHost, editHost, testByInfo, getGroupList } from '@/api/modules/host';
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+
+const loading = ref();
+
+interface DialogProps {
+    title: string;
+    rowData?: any;
+    getTableList?: () => Promise<any>;
+}
+const title = ref<string>('');
+const drawerVisiable = ref(false);
+const dialogData = ref<DialogProps>({
+    title: '',
+});
+const groupList = ref();
+const acceptParams = (params: DialogProps): void => {
+    dialogData.value = params;
+    title.value = i18n.global.t('commons.button.' + dialogData.value.title);
+    drawerVisiable.value = true;
+    loadGroups();
+};
+const emit = defineEmits<{ (e: 'search'): void }>();
+const handleClose = () => {
+    drawerVisiable.value = false;
+};
+
+type FormInstance = InstanceType<typeof ElForm>;
+const hostInfoRef = ref<FormInstance>();
+const rules = reactive({
+    groupBelong: [Rules.requiredSelect],
+    addr: [Rules.requiredInput],
+    port: [Rules.requiredInput, Rules.port],
+    user: [Rules.requiredInput],
+    authMode: [Rules.requiredSelect],
+    password: [Rules.requiredInput],
+    privateKey: [Rules.requiredInput],
+});
+
+const loadGroups = async () => {
+    const res = await getGroupList({ type: 'host' });
+    groupList.value = res.data;
+};
+
+const submitAddHost = (formEl: FormInstance | undefined, ops: string) => {
+    if (!formEl) return;
+    formEl.validate(async (valid) => {
+        if (!valid) return;
+        if (ops === 'create') {
+            loading.value = true;
+            await addHost(dialogData.value.rowData)
+                .then(() => {
+                    loading.value = false;
+                    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                    drawerVisiable.value = false;
+                    emit('search');
+                })
+                .catch(() => {
+                    loading.value = false;
+                });
+        }
+        if (ops === 'edit') {
+            loading.value = true;
+            await editHost(dialogData.value.rowData)
+                .then(() => {
+                    loading.value = false;
+                    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                    drawerVisiable.value = false;
+                    emit('search');
+                })
+                .catch(() => {
+                    loading.value = false;
+                });
+        }
+        if (ops === 'testconn') {
+            loading.value = true;
+            await testByInfo(dialogData.value.rowData).then((res) => {
+                loading.value = false;
+                if (res.data) {
+                    MsgSuccess(i18n.global.t('terminal.connTestOk'));
+                } else {
+                    MsgSuccess(i18n.global.t('terminal.connTestFailed'));
+                }
+            });
+        }
+    });
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>
diff --git a/frontend/src/views/host/terminal/terminal/index.vue b/frontend/src/views/host/terminal/terminal/index.vue
index b5d9e6e1c..f9e031cee 100644
--- a/frontend/src/views/host/terminal/terminal/index.vue
+++ b/frontend/src/views/host/terminal/terminal/index.vue
@@ -60,7 +60,14 @@
                         icon="Plus"
                     ></el-button>
                     <el-popover ref="popoverRef" width="250px" trigger="hover" virtual-triggering persistent>
-                        <el-button link type="primary" @click="onNewSsh">{{ $t('terminal.createConn') }}</el-button>
+                        <div style="margin-left: 10px">
+                            <el-button link type="primary" @click="onNewSsh">{{ $t('terminal.createConn') }}</el-button>
+                        </div>
+                        <div style="margin-left: 10px">
+                            <el-button link type="primary" @click="onNewLocal">
+                                {{ $t('terminal.localhost') }}
+                            </el-button>
+                        </div>
                         <div class="search-button" style="float: none">
                             <el-input
                                 v-model="hostfilterInfo"
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index 90c77bab9..1a3721de4 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -191,7 +191,7 @@ const registerForm = reactive({
 const registerRules = reactive({
     name: [Rules.requiredInput, Rules.userName],
     password: [Rules.requiredInput, Rules.password],
-    rePassword: [Rules.requiredInput, Rules.password, { validator: checkPassword, trigger: 'blur' }],
+    rePassword: [Rules.requiredInput, { validator: checkPassword, trigger: 'blur' }],
 });
 
 const loginButtonFocused = ref();