From ca78a24c4f0eb01cf18593ad7876d369d2070347 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Thu, 11 Dec 2025 14:50:07 +0800
Subject: [PATCH] 11

---
 src/router/routes/index.js                    |   2 +
 .../exampleList/components/EditDialog.vue     | 119 +++++++
 src/views/example/exampleList/index.vue       | 300 ++++++++++++++++++
 .../mirrorSystem/components/EditDialog.vue    | 119 +++++++
 src/views/mirror/mirrorSystem/index.vue       | 292 +++++++++++++++++
 .../mirrorUser/components/EditDialog.vue      | 119 +++++++
 src/views/mirror/mirrorUser/index.vue         | 295 +++++++++++++++++
 7 files changed, 1246 insertions(+)
 create mode 100644 src/views/example/exampleList/components/EditDialog.vue
 create mode 100644 src/views/example/exampleList/index.vue
 create mode 100644 src/views/mirror/mirrorSystem/components/EditDialog.vue
 create mode 100644 src/views/mirror/mirrorUser/components/EditDialog.vue

diff --git a/src/router/routes/index.js b/src/router/routes/index.js
index d0f4209..4051feb 100644
--- a/src/router/routes/index.js
+++ b/src/router/routes/index.js
@@ -17,6 +17,7 @@ import resource from './resource'
 import mirror from './mirror'
 import user from './user'
 import order from './order'
+import example from './example'
 export default [
     ...home,
     ...form,
@@ -37,4 +38,5 @@ export default [
     ...mirror,
     ...user,
     ...order,
+    ...example,
 ]
diff --git a/src/views/example/exampleList/components/EditDialog.vue b/src/views/example/exampleList/components/EditDialog.vue
new file mode 100644
index 0000000..51f7a3a
--- /dev/null
+++ b/src/views/example/exampleList/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/example/exampleList/index.vue b/src/views/example/exampleList/index.vue
new file mode 100644
index 0000000..cedc498
--- /dev/null
+++ b/src/views/example/exampleList/index.vue
@@ -0,0 +1,300 @@
+<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: '用户名', dataIndex: 'cpu' },
+    { title: '关联主机ID（使用主机）', dataIndex: 'memory' },
+    { title: '关联计算卡信息（使用GPU）', 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: '订单ID', dataIndex: 'storage' },
+    { title: 'IP地址', dataIndex: 'ip' },
+    { title: '端口号', dataIndex: 'storage' },
+    { title: '网络带宽', dataIndex: 'storage' },
+    { title: '存储容量', dataIndex: 'storage' },
+    { title: 'SSH登录信息', dataIndex: 'storage' },
+    { title: '运行时长', dataIndex: 'ip' },
+    { title: '费用（累计）', dataIndex: 'storage' },
+    { title: '是否自动续费', dataIndex: 'storage' },
+    { title: '自动续费周期', dataIndex: 'storage' },
+    { title: '操作日志ID', dataIndex: 'storage' },
+    { 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/mirror/mirrorSystem/components/EditDialog.vue b/src/views/mirror/mirrorSystem/components/EditDialog.vue
new file mode 100644
index 0000000..51f7a3a
--- /dev/null
+++ b/src/views/mirror/mirrorSystem/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/mirrorSystem/index.vue b/src/views/mirror/mirrorSystem/index.vue
index e69de29..3125977 100644
--- a/src/views/mirror/mirrorSystem/index.vue
+++ b/src/views/mirror/mirrorSystem/index.vue
@@ -0,0 +1,292 @@
+<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: 'ip' },
+    { title: '镜像类型', dataIndex: 'hostId' },
+    { title: '版本号（镜像版本）', dataIndex: 'hostName' },
+    { title: '大小（镜像大小）', dataIndex: 'regionId' },
+    { title: '支持计算卡型号', dataIndex: 'cpu' },
+    { title: '创建人ID（创建人）', dataIndex: 'memory' },
+    { title: '创建时间', dataIndex: 'storage' },
+    { title: '更新时间（最后更新时间）', dataIndex: 'ip' },
+    { title: '状态', dataIndex: 'storage' },
+    { title: '描述', dataIndex: 'storage' },
+    { title: '是否推荐', dataIndex: 'ip' },
+    { title: '下载次数', dataIndex: 'storage' },
+    { 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/mirror/mirrorUser/components/EditDialog.vue b/src/views/mirror/mirrorUser/components/EditDialog.vue
new file mode 100644
index 0000000..51f7a3a
--- /dev/null
+++ b/src/views/mirror/mirrorUser/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/mirrorUser/index.vue b/src/views/mirror/mirrorUser/index.vue
index e69de29..bbad3da 100644
--- a/src/views/mirror/mirrorUser/index.vue
+++ b/src/views/mirror/mirrorUser/index.vue
@@ -0,0 +1,295 @@
+<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: '所属用户ID', dataIndex: 'hostName' },
+    { title: '用户名', dataIndex: 'regionId' },
+    { title: '镜像名称', dataIndex: 'cpu' },
+    { title: '镜像来源', dataIndex: 'memory' },
+    { title: '源镜像ID', dataIndex: 'ip' },
+    { title: '共享范围', dataIndex: 'hostId' },
+    { title: '共享用户ID列表', dataIndex: 'hostName' },
+    { title: '是否加密', dataIndex: 'regionId' },
+    { title: '加密密码', dataIndex: 'cpu' },
+    { title: '镜像类型', dataIndex: 'memory' },
+    { title: '版本号（镜像版本）', dataIndex: 'storage' },
+    { title: '大小（镜像大小）', dataIndex: 'ip' },
+    { title: '状态', dataIndex: 'storage' },
+    { title: '描述', dataIndex: 'storage' },
+    { title: '创建时间', dataIndex: 'ip' },
+    { title: '最后使用时间', dataIndex: 'storage' },
+    { title: '支持计算卡型号', dataIndex: 'storage' },
+    { title: '下载次数', dataIndex: 'ip' },
+    { title: '安全补丁版本', dataIndex: 'storage' },
+    { 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>