diff --git a/src/apis/modules/userControl.js b/src/apis/modules/userControl.js
new file mode 100644
index 0000000..543276c
--- /dev/null
+++ b/src/apis/modules/userControl.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+//获取banner列表
+export const getCustomersList = (params) => request.basic.get('/api/v1/customers', params)
+
+// 黑名单列表
+export const getBlackCustomersList = (params) => request.basic.get('/api/v1/blackCustomers', params)
+
+
+//获取单个banner
+export const getBanner = (id) => request.basic.get(`/api/v1/banners/${id}`)
+//创建banner
+export const createBanner = (data) => request.basic.post('/api/v1/banners', data)
+//更新banner
+export const updateBanner = (id, data) => request.basic.put(`/api/v1/banners/${id}`, data)
+//删除banner
+export const deleteBanner = (id) => request.basic.delete(`/api/v1/banners/${id}`)
\ No newline at end of file
diff --git a/src/enums/dict.js b/src/enums/dict.js
index e4bac27..22d0e86 100644
--- a/src/enums/dict.js
+++ b/src/enums/dict.js
@@ -62,6 +62,15 @@ class AuthenticationTypeDict extends BaseDict {
     }
 }
 
+// 状态
+class DisabledDict extends BaseDict {
+    constructor() {
+        super([
+            ['ENABLED', '启用'],
+            ['DISABLED', '禁用'] 
+        ])
+    }
+}
 //如何使用:import {payTypeDict} from '@/enums/dict
 //获取下拉框列表：payTypeDict.options
 //获取label:payTypeDict.getLabel(1)
@@ -69,3 +78,4 @@ export const payTypeDict = new PayTypeDict()
 export const payStatusDict = new PayStatusDict()
 export const authenticationDict = new AuthenticationDict()
 export const authenticationTypeDict = new AuthenticationTypeDict()
+export const disabledDict = new DisabledDict()
diff --git a/src/views/userControl/ blackList/index.vue b/src/views/userControl/ blackList/index.vue
deleted file mode 100644
index f69cc79..0000000
--- a/src/views/userControl/ blackList/index.vue	
+++ /dev/null
@@ -1,294 +0,0 @@
-<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: '用户等级ID', dataIndex: 'hostId' },
-    { title: '等级名称', 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: 'storage' },
-    { title: '是否开通API权限', dataIndex: 'ip' },
-    { title: 'API密钥', dataIndex: 'storage' },
-    { title: '推荐人ID', 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/userControl/ blackList/components/EditDialog.vue b/src/views/userControl/blackList/components/EditDialog.vue
similarity index 100%
rename from src/views/userControl/ blackList/components/EditDialog.vue
rename to src/views/userControl/blackList/components/EditDialog.vue
diff --git a/src/views/userControl/blackList/index.vue b/src/views/userControl/blackList/index.vue
new file mode 100644
index 0000000..fd4f41f
--- /dev/null
+++ b/src/views/userControl/blackList/index.vue
@@ -0,0 +1,226 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form :model="searchFormData" layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item :label="$t('pages.system.role.form.name')" name="name">
+                            <a-input :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col class="align-right" v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button ghost type="primary" @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row :gutter="8" :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <!-- <a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        添加图片
+                    </a-button> -->
+                </x-action-bar>
+                <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
+                    :scroll="{ x: 1000 }" @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'banner_type' === column.key">
+                            <!--状态-->
+                            <a-tag v-if="record.banner_type == 1" color="processing">
+                                首页轮播图
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag v-else color="processing">
+                                营销活动图
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'is_recommend' === column.key">
+                            <!--状态-->
+                            <a-tag v-if="record.banner_type == true" color="processing">
+                                启用
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag v-else color="processing">
+                                禁用
+                            </a-tag>
+                        </template>
+
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+import { disabledDict, authenticationTypeDict } from '@/enums/dict'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: '用户姓名', dataIndex: 'customerName', width: 200 },
+    { title: '用户联系方式', dataIndex: 'phone', width: 150 },
+    {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 150,
+        customRender: ({ text }) => disabledDict.getLabel(text) || text,
+    },
+    {
+        title: '账号类型',
+        key: 'accountType',
+        dataIndex: 'accountType',
+        width: 120,
+        customRender: ({ text }) => authenticationTypeDict.getLabel(text) || text,
+    },
+    { title: '拉黑时间', key: 'blackTime', dataIndex: 'blackTime', width: 160 },
+    { title: '解除时间', key: 'unblackTime', dataIndex: 'unblackTime', width: 160 },
+    { title: '拉黑原因', key: 'blacklistReason', dataIndex: 'blacklistReason', width: 220 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { data, total } = await apis.userControl
+            .getBlackCustomersList({
+                pageSize,
+                current: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (data.length > 0) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetForm()
+    // resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userControl/userList/index.vue b/src/views/userControl/userList/index.vue
index ac36a1a..622cd3b 100644
--- a/src/views/userControl/userList/index.vue
+++ b/src/views/userControl/userList/index.vue
@@ -1,248 +1,181 @@
 <template>
     <x-search-bar class="mb-8-2">
         <template #default="{ gutter, colSpan }">
-            <a-form
-                :label-col="{ style: { width: '100px' } }"
-                :model="searchFormData"
-                layout="inline">
+            <a-form :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 :label="$t('pages.system.role.form.name')" name="name">
+                            <a-input :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></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-col class="align-right" v-bind="colSpan">
                         <a-space>
-                            <a-button>重置</a-button>
-                            <a-button
-                                ghost
-                                type="primary"
-                                @click="handleSearch">
-                                搜索
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button ghost type="primary" @click="handleSearch">
+                                {{ $t('button.search') }}
                             </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>
+    <a-row :gutter="8" :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <!-- <a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        添加图片
+                    </a-button> -->
+                </x-action-bar>
+                <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
+                    :scroll="{ x: 1000 }" @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'banner_type' === column.key">
+                            <!--状态-->
+                            <a-tag v-if="record.banner_type == 1" color="processing">
+                                首页轮播图
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag v-else color="processing">
+                                营销活动图
+                            </a-tag>
                         </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 v-if="'is_recommend' === column.key">
+                            <!--状态-->
+                            <a-tag v-if="record.banner_type == true" color="processing">
+                                启用
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag v-else color="processing">
+                                禁用
+                            </a-tag>
+                        </template>
+
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
 </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 { formatUtcDateTime } from '@/utils/util'
 import { config } from '@/config'
-import { usePagination } from '@/hooks'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
 import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+import { disabledDict, authenticationTypeDict } from '@/enums/dict'
 
 defineOptions({
-    name: 'listTable',
+    name: 'systemRole',
 })
-
+const { t } = useI18n() // 解构出t方法
 const columns = [
-    { title: '记录ID', dataIndex: 'hostId' },
-    { title: '用户ID', dataIndex: 'hostName' },
-    { title: '用户名', dataIndex: 'regionId' },
-    { title: '手机号', dataIndex: 'cpu' },
-    { title: '拉黑时间（加入黑名单时间）', dataIndex: 'memory' },
-    { title: '拉黑原因（加入原因）', dataIndex: 'ip' },
-    { title: '操作人（操作人ID）', dataIndex: 'hostId' },
-    { title: '原账户状态', dataIndex: 'hostName' },
-    { title: '解除黑名单时间', dataIndex: 'regionId' },
-    { title: '备注', dataIndex: 'cpu' },
-    { title: '操作', key: 'action', width: 160 },
+    { title: '用户姓名', dataIndex: 'userName', width: 200 },
+    { title: '用户联系方式', dataIndex: 'phone', width: 150 },
+    {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 150,
+        customRender: ({ text }) => disabledDict.getLabel(text) || text,
+    },
+    {
+        title: '账号类型',
+        key: 'accountType',
+        dataIndex: 'accountType',
+        width: 120,
+        customRender: ({ text }) => authenticationTypeDict.getLabel(text) || text,
+    },
+    { title: '余额', key: 'balance', dataIndex: 'balance', width: 120 },
+    { title: '算力点', key: 'point', dataIndex: 'point', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
 ]
-// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
-//     usePagination()
-const listData = ref([])
-const editDialogRef = ref()
-const searchBarExpand = ref(false)
-const size = ref('default')
 
-// getPageList()
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
 
 /**
- * 获取分页列表
+ * 获取用户列表
+ * @returns {Promise<void>}
  */
 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
-        // }
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { data, total } = await apis.userControl
+            .getCustomersList({
+                pageSize,
+                current: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (data.length > 0) {
+            listData.value = data
+            paginationState.total = total
+        }
     } catch (error) {
-        // hideLoading()
+        hideLoading()
     }
 }
 
 /**
- * 搜索
+ * 移除
  */
-function handleSearch() {
-    // resetPagination()
-    // getPageList()
-}
-
-/**
- * 删除
- */
-function handleDelete({ id }) {
+function handleRemove({ id }) {
     Modal.confirm({
-        title: '删除提示',
-        content: '确认删除？',
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
         onOk: () => {
             return new Promise((resolve, reject) => {
-                ;(async () => {
+                ; (async () => {
                     try {
-                        const { code } = await apis.common.del(id).catch(() => {
+                        const { success } = await apis.role.delRole(id).catch(() => {
                             throw new Error()
                         })
-                        if (config('http.code.success') === code) {
+                        if (config('http.code.success') === success) {
                             resolve()
-                            message.success('删除成功')
+                            message.success(t('component.message.success.delete'))
                             await getPageList()
                         }
                     } catch (error) {
@@ -255,29 +188,37 @@ function handleDelete({ id }) {
 }
 
 /**
- * 密度
- * @param {string} key
- */
-function handleSize({ key }) {
-    size.value = key
-}
-
-/**
- * 表格发生改变
- * @param current
- * @param pageSize
+ * 分页
  */
 function onTableChange({ current, pageSize }) {
-    // paginationState.current = current
-    // paginationState.pageSize = pageSize
-    // getPageList()
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
 }
 
 /**
- * 完成
+ * 重置
  */
-function onOk() {
-    // getPageList()
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetForm()
+    // resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
 }
 </script>