diff --git a/env/.env.development b/env/.env.development
index 04fa273972a93450de0650a9d803756696c87fa4..58ff52ea826e6badcca7bb131b80ecf481f906de 100644
--- a/env/.env.development
+++ b/env/.env.development
@@ -4,3 +4,5 @@ NODE_ENV = 'development'
 VITE_DELETE_CONSOLE = false
 # 是否开启sourcemap
 VITE_SHOW_SOURCEMAP = true
+# 是否开启mock数据
+VITE_USE_MOCK = true
diff --git a/package.json b/package.json
index 095645cd3283f065e42a494b77aecf760747f14e..a96b088f1a5d84e58fe91d44dfa5dd8b2bc22160 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,8 @@
     "qs": "6.5.3",
     "vue": "3.4.21",
     "wot-design-uni": "^1.3.10",
-    "z-paging": "^2.7.10"
+    "z-paging": "^2.7.10",
+    "mockjs": "^1.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.6.1",
diff --git a/src/pages.json b/src/pages.json
index a55fb466dbdd902f585d5c744a91d1092f4d8c53..0044f3f84ed9cf50a3cc0deb78f9c75f58b6a1fb 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -134,7 +134,14 @@
       "style": {
         "navigationBarTitleText": "用户信息"
       }
+    },
+    {
+      "path": "pages/role/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "角色管理"
+      }
     }
   ],
   "subPackages": []
-}
\ No newline at end of file
+}
diff --git a/src/pages/role/index.vue b/src/pages/role/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7cd90a0cb9ce6e6b8eb78bb35cb7bd2a6f39e81d
--- /dev/null
+++ b/src/pages/role/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <view class="container">
+    <wd-search
+      v-model="query.name"
+      @focus="focus"
+      @search="search"
+      @clear="clear"
+      maxlength="20"
+    >
+      <template #suffix>
+        <view class="filter-box" @click="showfilter">
+          <wd-icon
+            name="filter"
+            size="22px"
+            custom-style="filter-custom-style"
+          ></wd-icon>
+        </view>
+      </template>
+    </wd-search>
+    <!--  列表容器  -->
+    <view class="content">
+      <wd-row v-for="(item, index) in list" :key="index">
+        <wd-col :span="24">
+          <view class="item-box" @click="showItem(item)">
+            <view class="list-item-content-title"
+              >{{ item.name }}/{{ item.code }}</view
+            >
+            <wd-gap bg-color="#FFFFFF"></wd-gap>
+            <wd-row>
+              <wd-col :span="8">
+                <view>
+                  <wd-tag type="primary" plain>{{ item.type }}</wd-tag>
+                </view>
+              </wd-col>
+              <wd-col :span="12" :offset="4">
+                <view style="width: 100%">{{ item.createTime }}</view>
+              </wd-col>
+            </wd-row>
+          </view>
+        </wd-col>
+      </wd-row>
+    </view>
+  </view>
+  <!--  popup弹窗  -->
+  <!-- page-meta 只能是页面内的第一个节点 -->
+  <page-meta
+    :page-style="`overflow:${show ? 'hidden' : 'visible'};`"
+  ></page-meta>
+
+  <wd-popup
+    v-model="show"
+    lock-scroll
+    position="right"
+    :safe-area-inset-bottom="true"
+    custom-style="width: 70%;border-radius: 20px 0 0 20px;margin-top: 11%;"
+    @close="handleClose"
+  >
+    <wd-row gutter="20">
+      <wd-gap bg-color="#FFFFFF"></wd-gap>
+      <wd-col :span="24">
+        <wd-text text="角色标识" bold size="19px" color="#333333"></wd-text>
+        <wd-gap bg-color="#FFFFFF"></wd-gap>
+      </wd-col>
+
+      <wd-col :span="24">
+        <wd-input v-model="query.code" clearable placeholder="请输入角色标识" />
+        <wd-gap bg-color="#FFFFFF" height="160rpx"></wd-gap>
+      </wd-col>
+      <wd-col :span="24">
+        <wd-text text="角色类型" bold size="19px" color="#333333"></wd-text>
+        <wd-gap bg-color="#FFFFFF"></wd-gap>
+      </wd-col>
+
+      <wd-col :span="24">
+        <wd-radio-group v-model="query.type" shape="button">
+          <wd-radio :value="1">沃特</wd-radio>
+          <wd-radio :value="2">商家后台</wd-radio>
+        </wd-radio-group>
+        <wd-gap bg-color="#FFFFFF" height="160rpx"></wd-gap>
+      </wd-col>
+
+      <wd-col :span="24">
+        <wd-text text="创建时间" bold size="19px" color="#333333"></wd-text>
+        <wd-gap bg-color="#FFFFFF"></wd-gap>
+      </wd-col>
+      <wd-col :span="24">
+        <wd-datetime-picker v-model="query.createTime" />
+        <wd-gap bg-color="#FFFFFF" height="160rpx"></wd-gap>
+      </wd-col>
+    </wd-row>
+  </wd-popup>
+  <wd-fab :draggable="true"></wd-fab>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { getList, deleteRole } from '@/service/role/RoleApi'
+  import { onLoad } from '@dcloudio/uni-app'
+
+  // 搜索参数
+  const query = ref({
+    name: '',
+    code: '',
+    status: 0,
+    createTime: '',
+    deptId: 151,
+    pageNo: 1,
+    pageSize: 10
+  })
+
+  const list = ref([])
+  const show = ref(false)
+  // 获取焦点
+  const focus = () => {
+    console.log('focus')
+  }
+  // 失去焦点
+  const blur = () => {
+    console.log('blur')
+  }
+  // 搜索
+  const search = () => {
+    query.value.pageNo = 1
+    getList(query.value).then((res) => {
+      list.value = res.data
+    })
+  }
+  // 清空
+  const clear = () => {
+    query.value.name = ''
+  }
+
+  const showfilter = () => {
+    show.value = true
+  }
+  const handleClose = () => {
+    show.value = false
+  }
+  const showItem = (item) => {
+    console.log(item)
+  }
+  const handleConfirm = (e) => {
+    console.log(e)
+  }
+  onLoad(async () => {
+    const res = await getList(query.value)
+    list.value = res.data
+  })
+  onReachBottom(async () => {
+    query.value.pageNo++
+    const res = await getList(query.value)
+    list.value = list.value.concat(res.data)
+  })
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh; /* 使容器高度占满整个屏幕 */
+
+    .content {
+      padding: 10px;
+      background-color: #ffffff;
+
+      .item-box {
+        padding: 10px;
+        margin-bottom: 5px;
+        border: 1px solid #e8e8e8;
+
+        .list-item-content-title {
+          font-size: 16px;
+          color: #333333;
+        }
+      }
+    }
+  }
+
+  .filter-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 44px;
+    padding: 0 20px;
+    background-color: #fff;
+  }
+</style>
diff --git a/src/pages/work/index.vue b/src/pages/work/index.vue
index 9ec4f989261913e9910ea9fc2b4dbd7a0cdf0f9f..ac664e6cc570d3c4ee873b981bf889fe09c3740d 100644
--- a/src/pages/work/index.vue
+++ b/src/pages/work/index.vue
@@ -25,7 +25,7 @@
       <view class="text-22rpx box-border">系统管理</view>
       <view class="flex flex-wrap gap-6 mt-2">
         <AppItems title="用户管理" icon="i-ic-baseline-account-box" />
-        <AppItems title="角色管理" icon="i-ic-round-person-pin" />
+        <AppItems title="角色管理" icon="i-ic-round-person-pin" link="/pages/role/index"/>
         <AppItems title="菜单管理" icon="i-ic-twotone-list-alt" />
       </view>
     </view>
diff --git a/src/service/role/RoleApi.ts b/src/service/role/RoleApi.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e36e0cdec02966f89690fd57d439916ec35615fb
--- /dev/null
+++ b/src/service/role/RoleApi.ts
@@ -0,0 +1,53 @@
+import { httpGet, httpPost } from '@/utils/http'
+import Mock from 'mockjs'
+export interface RoleVO {
+  id: number
+  name: string
+  code: string
+  sort: number
+  data_scope: string
+  data_scope_dept_ids: string
+  status: number
+  type: number
+  remark: string
+  createTime: string
+}
+const useMock = import.meta.env.VITE_USE_MOCK === 'true'
+export const getList = (query: object) => {
+  if (useMock) {
+    return new Promise((resolve) => {
+      const data = Mock.mock({
+        'data|10': [
+          {
+            'id|+1': 1,
+            name: '@name',
+            code: '@word',
+            'sort|1-100': 1,
+            data_scope: '@word',
+            data_scope_dept_ids: '@word',
+            'status|1-2': 1,
+            'type|1-2': '@word',
+            remark: '@sentence',
+            createTime: '@datetime'
+          }
+        ]
+      })
+      resolve({ data: data.data })
+    })
+  } else {
+    return httpGet('/system/role/page', query)
+  }
+}
+export const getInfo = (id: number): Promise<RoleVO> => {
+  return httpGet<RoleVO>('/system/role/get?id=' + id)
+}
+
+export const createRole = (data: object) => {
+  return httpPost('/system/role/create', data)
+}
+export const updateRole = (data: object) => {
+  return httpPost('/system/role/update', data)
+}
+export const deleteRole = (id: number) => {
+  return httpPost('/system/role/delete' + { id })
+}