feat: 新增角色相关页面(WIP)

src/api/role.ts

@@ -0,0 +1,20 @@
+import { http } from "@/utils/http";
+import { BaseResponse } from "@/api/base";
+
+/* 角色返回结果 */
+export type RoleResult = {
+  id: string;
+  createdAt: Date;
+  updatedAt: Date;
+  name: string;
+  code: string;
+  describe: string;
+};
+
+export const getAllRole = (data: any) => {
+  return http.request<BaseResponse<Array<RoleResult>>>(
+    "get",
+    "/admin/v1/role",
+    { data }
+  );
+};

src/views/infra/robot/index.vue

@@ -73,8 +73,12 @@ const getAllRobotHandle = async () => {
       // 获取成功，设置数据
       robotList.value = res.data;
     })
-    .catch(() => {
+    .catch(e => {
-      message("获取机器人列表失败", { type: "error" });
+      const response = e.response.data;
+      message(
+        response.message + (response.errMsg ? ": " + response.errMsg : ""),
+        { type: "error" }
+      );
     })
     .finally(() => {
       // 关闭加载动画
@@ -329,12 +333,12 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .card-container {
-  margin: 10px;
-  width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: flex-start; /* 改为 flex-start 以优先横向排列 */
+  width: 100%;
+  margin: 10px;
 }
 
 .robot-card {
@@ -345,8 +349,8 @@ onMounted(() => {
 
 .robot-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 
 .robot-name {
@@ -362,7 +366,7 @@ onMounted(() => {
 .vncIframe {
   width: 1280px;
   height: 747px;
-  transform-origin: left top;
   transform: scale(0.95, 0.95);
+  transform-origin: left top;
 }
 </style>

src/views/system/role/index.vue

@@ -1,12 +1,86 @@
 <script setup lang="ts">
+import {
+  searchForm,
+  loading,
+  getAllRoleHandle,
+  tableData
+} from "./utils/setting";
+import { onMounted } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Refresh from "@iconify-icons/ep/refresh";
+import Search from "@iconify-icons/ep/search";
+
 defineOptions({
   name: "AdminRole"
 });
 
+// 搜索
+const onSearch = () => {
+  console.log("搜索");
+};
+
+// 重置表单
+const resetForm = () => {
+  console.log("重置");
+};
+
+onMounted(() => {
+  // 获取所有角色
+  getAllRoleHandle();
+});
 </script>
 
 <template>
-  <div class="flex justify-center items-center h-[640px]">
+  <div class="main">
-    角色管理
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="searchForm"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+    >
+      <el-form-item label="角色名称：" prop="name">
+        <el-input
+          v-model="searchForm.name"
+          placeholder="请输入角色名称"
+          clearable
+          class="!w-[180px]"
+        />
+      </el-form-item>
+      <el-form-item label="角色标识：" prop="code">
+        <el-input
+          v-model="searchForm.code"
+          placeholder="请输入角色标识"
+          clearable
+          class="!w-[180px]"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(Search)"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="tableData" style="width: 100%; margin-top: 20px">
+      <el-table-column fixed prop="id" label="Id" width="300px" />
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="code" label="角色代码" />
+      <el-table-column prop="describe" label="描述" />
+      <el-table-column prop="createdAt" label="创建时间" />
+      <el-table-column prop="updatedAt" label="更新时间" />
+      <el-table-column fixed="right" label="操作" width="120">
+        <template #default>
+          <el-button link type="primary" size="small">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>

src/views/system/role/utils/setting.ts

@@ -0,0 +1,39 @@
+import { reactive, ref } from "vue";
+import { getAllRole, RoleResult } from "@/api/role";
+import { message } from "@/utils/message";
+
+// 查询表单
+const searchForm = reactive({
+  keyword: "",
+  code: ""
+});
+
+// 数据加载状态
+const loading = ref(true);
+
+// 表格数据
+const tableData = ref([] as RoleResult[]);
+
+const getAllRoleHandle = () => {
+  // 设置为加载中
+  loading.value = true;
+  // 调用接口，获取数据
+  getAllRole(searchForm)
+    .then(res => {
+      // 获取成功，设置数据
+      tableData.value = res.data;
+    })
+    .catch(e => {
+      const response = e.response.data;
+      message(
+        response.message + (response.errMsg ? ": " + response.errMsg : ""),
+        { type: "error" }
+      );
+    })
+    .finally(() => {
+      // 关闭加载动画
+      loading.value = false;
+    });
+};
+
+export { searchForm, loading, getAllRoleHandle, tableData };

src/views/system/user/index.vue

@@ -2,11 +2,8 @@
 defineOptions({
   name: "AdminUser"
 });
-
 </script>
 
 <template>
-  <div class="flex justify-center items-center h-[640px]">
+  <div class="flex justify-center items-center h-[640px]">用户管理</div>
-    用户管理
-  </div>
 </template>