diff --git a/src/views/mirror/mirrorPublic/components/EditDialog.vue b/src/views/mirror/mirrorPublic/components/EditDialog.vue
new file mode 100644
index 0000000..51f7a3a
--- /dev/null
+++ b/src/views/mirror/mirrorPublic/components/EditDialog.vue
@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/mirror/mirrorPublic/index.vue b/src/views/mirror/mirrorPublic/index.vue
index e69de29..c3eaffa 100644
--- a/src/views/mirror/mirrorPublic/index.vue
+++ b/src/views/mirror/mirrorPublic/index.vue
@@ -0,0 +1,289 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '镜像ID', dataIndex: 'hostId' },
+    { title: '镜像名称', dataIndex: 'hostName' },
+    { title: '镜像类型', dataIndex: 'regionId' },
+    { title: '版本号（镜像版本）', dataIndex: 'cpu' },
+    { title: '大小（镜像大小）', dataIndex: 'memory' },
+    { title: '支持计算卡型号', dataIndex: 'storage' },
+    { title: '创建人ID（创建人）', dataIndex: 'ip' },
+    { title: '创建时间', dataIndex: 'hostId' },
+    { title: '更新时间（最后更新时间）', dataIndex: 'hostName' },
+    { title: '状态', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '描述', dataIndex: 'memory' },
+    { title: '是否推荐', dataIndex: 'storage' },
+    { title: '下载次数', dataIndex: 'ip' },
+    { title: '兼容实例规格', dataIndex: 'storage' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/resource/computerArea/components/EditDialog.vue b/src/views/resource/computerArea/components/EditDialog.vue
new file mode 100644
index 0000000..51f7a3a
--- /dev/null
+++ b/src/views/resource/computerArea/components/EditDialog.vue
@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/resource/computerArea/index.vue b/src/views/resource/computerArea/index.vue
index e69de29..0687a05 100644
--- a/src/views/resource/computerArea/index.vue
+++ b/src/views/resource/computerArea/index.vue
@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/resource/computerCard/components/EditDialog.vue b/src/views/resource/computerCard/components/EditDialog.vue
new file mode 100644
index 0000000..51f7a3a
--- /dev/null
+++ b/src/views/resource/computerCard/components/EditDialog.vue
@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/resource/computerCard/index.vue b/src/views/resource/computerCard/index.vue
index e69de29..8ca067b 100644
--- a/src/views/resource/computerCard/index.vue
+++ b/src/views/resource/computerCard/index.vue
@@ -0,0 +1,285 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '计算卡ID', dataIndex: 'hostId' },
+    { title: '型号', dataIndex: 'hostName' },
+    { title: '显存容量', dataIndex: 'regionId' },
+    { title: '核心数', dataIndex: 'cpu' },
+    { title: '所属主机ID', dataIndex: 'memory' },
+    { title: '运行状态', dataIndex: 'storage' },
+    { title: '当前使用实例', dataIndex: 'ip' },
+    { title: '用户信息（租用者）', dataIndex: 'status' },
+    { title: '开始使用时间', dataIndex: 'bandwidth' },
+    { title: '预计释放时间', dataIndex: 'createdAt' },
+    { title: '固件版本', dataIndex: 'updatedAt' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/resource/host/components/EditDialog.vue b/src/views/resource/host/components/EditDialog.vue
new file mode 100644
index 0000000..51f7a3a
--- /dev/null
+++ b/src/views/resource/host/components/EditDialog.vue
@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/resource/host/index.vue b/src/views/resource/host/index.vue
index e69de29..a9592fe 100644
--- a/src/views/resource/host/index.vue
+++ b/src/views/resource/host/index.vue
@@ -0,0 +1,287 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '主机ID', dataIndex: 'hostId' },
+    { title: '主机名称', dataIndex: 'hostName' },
+    { title: '所属区域ID', dataIndex: 'regionId' },
+    { title: '硬件配置—CPU', dataIndex: 'cpu' },
+    { title: '硬件配置—内存', dataIndex: 'memory' },
+    { title: '硬件配置—存储（硬盘容量）', dataIndex: 'storage' },
+    { title: '挂载计算卡信息', dataIndex: 'gpu' },
+    { title: 'IP地址', dataIndex: 'ip' },
+    { title: '运行状态', dataIndex: 'status' },
+    { title: '网络带宽', dataIndex: 'bandwidth' },
+    { title: '创建时间', dataIndex: 'createdAt' },
+    { title: '更新时间（最后更新时间）', dataIndex: 'updatedAt' },
+    { title: '操作人', dataIndex: 'operator' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>