diff --git a/src/views/user/roles.vue b/src/views/user/roles.vue
index ce510db..f592f69 100644
--- a/src/views/user/roles.vue
+++ b/src/views/user/roles.vue
@@ -1,12 +1,127 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { ElButton } from "element-plus";
+import { Delete, Plus, Search } from "@element-plus/icons-vue";
+import DataForm from "@/components/data-form/DataForm.vue";
+import type { FormField } from "@/components/data-form/DataFormTypes.ts";
+import { AgGridVue } from "ag-grid-vue3";
+import type { GridOptions } from "ag-grid-enterprise";
+import type { GridApi, GridReadyEvent } from "ag-grid-community";
+import { localeText as localeTextCn } from "@/components/yvTable/yv-aggrid-cn.locale";
+
+// 定义 Props 类型
+interface ComponentProps {
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<ComponentProps>(), {});
+
+// 定义 State 类型
+interface ComponentState {
+    queryData: any;
+    grid1Data: Array<any>;
+}
+
+// state 属性
+const state = reactive<ComponentState>({
+    queryData: {},
+    grid1Data: [],
+});
+
+// 定义 Data 类型
+interface ComponentData {
+    formFields?: Array<FormField>;
+    gridSetting: Partial<GridOptions>;
+    api?: GridApi;
+}
+
+// 内部数据
+const data: ComponentData = {
+    formFields: [
+        {
+            dataPath: 'roleCode', label: '角色编号', input: 'Input',
+            inputProps: {
+                placeholder: '角色编号',
+                clearable: true,
+            }
+        },
+        {
+            dataPath: 'isEnable', label: '是否启用', input: 'SelectV2',
+            inputProps: {
+                placeholder: "是否启用",
+                clearable: true,
+                options: [
+                    { value: "0", label: "禁用" },
+                    { value: "1", label: "启用" },
+                ],
+            }
+        },
+    ],
+    gridSetting: {
+        localeText: localeTextCn,
+        // suppressNoRowsOverlay: true,
+        // suppressLoadingOverlay: true,
+        // 选择行配置
+        rowSelection: "single",
+        columnDefs: [
+            { field: 'id', headerName: 'id', editable: false, hide: true },
+            { field: 'roleCode', headerName: '角色编号', editable: false },
+            { field: 'roleName', headerName: '角色名称', editable: false },
+            { field: 'isEnable', headerName: '是否启用', editable: false },
+            { field: 'createAt', headerName: '创建时间', editable: false },
+            { field: 'createBy', headerName: '创建人', editable: false },
+            { field: 'updateAt', headerName: '最后更新时间', editable: false },
+            { field: 'updateBy', headerName: '更新人', editable: false },
+        ],
+        pagination: true,
+        paginationPageSize: 50,
+        // suppressPaginationPanel
+        onGridReady(event: GridReadyEvent) {
+            data.api = event.api
+        },
+    },
+};
+
+</script>
+
 <template>
-  <div class="roles">
-    roles
-  </div>
+    <div class="dashboard flex-column-container">
+        <div class="tools flex-item-fixed">
+            <ElButton :icon="Search">查询</ElButton>
+            <ElButton :icon="Plus">新增</ElButton>
+            <ElButton :icon="Delete" type="danger" :plain="true">删除</ElButton>
+        </div>
+        <DataForm
+            class="query-form flex-item-fixed"
+            style="width: 500px;"
+            :data="state.queryData"
+            :formFields="data.formFields"
+            :columnCount="2"
+            layout="bothFixed"
+            labelWidth="85px"
+            inputWidth="200px"
+        />
+        <AgGridVue
+            ref="gridRef"
+            :class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row','allow-vertical-line', 'flex-item-fill']"
+            v-bind="{...data.gridSetting}"
+            :modelValue="state.grid1Data"
+        >
+        </AgGridVue>
+    </div>
 </template>
-<script setup>
-</script>
-<style lang="less">
-.dashboard{
 
+<style scoped>
+.dashboard {
+    height: 100%;
+}
+
+.tools {
+    margin-bottom: 8px;
+}
+
+.query-form {
+    height: unset;
 }
 </style>
+