diff --git a/ui/dasadmin/src/lang/common/en/management.ts b/ui/dasadmin/src/lang/common/en/management.ts
new file mode 100644
index 00000000..02caf5bd
--- /dev/null
+++ b/ui/dasadmin/src/lang/common/en/management.ts
@@ -0,0 +1,5 @@
+export default{
+    search:'Search',
+    add:'Add',
+    'Query roles by name':'Query roles by name',
+}
\ No newline at end of file
diff --git a/ui/dasadmin/src/lang/common/zh-cn/management.ts b/ui/dasadmin/src/lang/common/zh-cn/management.ts
new file mode 100644
index 00000000..f19e77c7
--- /dev/null
+++ b/ui/dasadmin/src/lang/common/zh-cn/management.ts
@@ -0,0 +1,5 @@
+export default{
+    search:'搜索',
+    add:'新增',
+    'Query roles by name':'按名称查询角色',
+}
\ No newline at end of file
diff --git a/ui/dasadmin/src/views/backend/InstitutionalManagement/InstitutionalManagement.vue b/ui/dasadmin/src/views/backend/InstitutionalManagement/InstitutionalManagement.vue
new file mode 100644
index 00000000..2208aecf
--- /dev/null
+++ b/ui/dasadmin/src/views/backend/InstitutionalManagement/InstitutionalManagement.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="instititionalManagement">
+        <el-container>
+            <el-aside class="defaultAside">
+                <el-header class="treeHeader">
+                    <el-input v-model="searchInputTreeValue" :placeholder="treeSearchInputPlaceholder" class="searchInput"></el-input>
+                </el-header>
+                <el-main>
+                    <el-tree :data="treeData"></el-tree>
+                </el-main>
+            </el-aside>
+            <el-container>
+                <el-header class="defaultHeader">
+                    <div class="searchPart">
+                        <el-input class="searchInput"></el-input>
+                        <el-button type="primary" :icon="Search" class="defaultBtn">{{ t('management.search') }}</el-button>
+                    </div>
+                    <el-button type="primary" :icon="Plus" class="defaultBtn">{{ t('management.add') }}</el-button>
+                </el-header>
+                <el-main>
+                    <el-table></el-table>
+                </el-main>
+            </el-container>
+        </el-container>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElContainer, ElAside, ElHeader, ElMain, ElInput, ElButton, ElTable, ElTree } from 'element-plus'
+import { Plus, Search } from '@element-plus/icons-vue'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+const treeSearchInputPlaceholder = '搜索机构'
+const searchInputTreeValue = ref<string>('')
+
+const treeData = ref()
+</script>
+
+<style lang="scss" scoped>
+@mixin searchInput($value) {
+    margin-right: $value;
+    width: 220px;
+    height: 40px;
+}
+.instititionalManagement {
+    .defaultAside {
+        width: 260px;
+        .treeHeader {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .searchInput {
+                @include searchInput(0);
+            }
+        }
+    }
+    .defaultHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .searchPart {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .defaultBtn {
+            width: 88px;
+            height: 40px;
+        }
+        .searchInput {
+            @include searchInput(10px);
+        }
+    }
+}
+</style>
diff --git a/ui/dasadmin/src/views/backend/InstitutionalManagement/type.ts b/ui/dasadmin/src/views/backend/InstitutionalManagement/type.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/ui/dasadmin/src/views/backend/RoleManagement/RoleManagement.vue b/ui/dasadmin/src/views/backend/RoleManagement/RoleManagement.vue
new file mode 100644
index 00000000..64427e65
--- /dev/null
+++ b/ui/dasadmin/src/views/backend/RoleManagement/RoleManagement.vue
@@ -0,0 +1,87 @@
+<template>
+    <div class="roleManagement">
+        <el-container>
+            <el-header class="containerHeader">
+                <div class="searchPart">
+                    <el-input class="searchInput" v-model:value="searchInputValue" :placeholder="searchInputPlacehoder"></el-input>
+                    <el-button type="primary" :icon="Search" class="defaultBtn" @click="searchClick">{{ t('management.search') }}</el-button>
+                </div>
+                <el-button type="primary" :icon="Plus" class="defaultBtn" @click="addClick">{{ t('management.add') }}</el-button>
+            </el-header>
+            <el-main class="containerMain">
+                <el-table :data="tableData">
+                    <el-table-column
+                        v-for="item in tableColumn"
+                        :key="item.key"
+                        :prop="item.prop"
+                        :label="item.label"
+                        :fixed="item.fixed"
+                        :align="item.align ?? 'center'"
+                    ></el-table-column>
+                </el-table>
+            </el-main>
+        </el-container>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElContainer, ElHeader, ElMain, ElInput, ElButton, ElTable, ElTableColumn } from 'element-plus'
+import { Plus, Search } from '@element-plus/icons-vue'
+import { tableDataType, tableColumnType, roleDataEnum, roleTableDataKeyType } from './type'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const searchInputPlacehoder = t('management.Query roles by name')
+const searchInputValue = ref<string>('')
+const searchClick = () => {
+    if (!searchInputValue.value) return
+}
+
+const tableColumn = ref<tableColumnType<roleTableDataKeyType>[]>([
+    {
+        key: '1',
+        prop: 'roleName',
+        label: roleDataEnum['roleName'],
+    },
+    {
+        key: '2',
+        prop: 'roleCode',
+        label: roleDataEnum['roleCode'],
+    },
+    {
+        key: '3',
+        prop: 'remark',
+        label: roleDataEnum['remark'],
+    },
+])
+const tableData = ref<tableDataType[]>([])
+const addClick = () => {
+    // 新增角色
+}
+</script>
+
+<style scoped lang="scss">
+.roleManagement {
+    width: 100%;
+    height: 100%;
+    .containerHeader {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .searchInput {
+            margin-right: 10px;
+            width: 220px;
+            height: 40px;
+        }
+        .defaultBtn {
+            width: 88px;
+            height: 40px;
+        }
+    }
+    .containerMain {
+        width: 100%;
+    }
+}
+</style>
diff --git a/ui/dasadmin/src/views/backend/RoleManagement/type.ts b/ui/dasadmin/src/views/backend/RoleManagement/type.ts
new file mode 100644
index 00000000..bf39ba59
--- /dev/null
+++ b/ui/dasadmin/src/views/backend/RoleManagement/type.ts
@@ -0,0 +1,19 @@
+export enum roleDataEnum {
+    roleName = '角色名称',
+    roleCode = '角色编码',
+    remark = '备注',
+}
+export type roleTableDataKeyType = keyof typeof roleDataEnum
+
+export type tableDataType = {
+    roleName: string
+    roleCode: number
+    remark: string
+}
+export type tableColumnType<T extends roleTableDataKeyType> = {
+    key: string
+    prop: T
+    label: (typeof roleDataEnum)[T]
+    fixed?: boolean
+    align?: 'left' | 'center' | 'right'
+}