Merge branch 'main' of github.com:pure-admin/vue-pure-admin into gitee

2025-11-21 14:13:36 +08:00 · 2023-05-18 17:25:14 +08:00
parent b9daa90b37 9efc9db2f0
commit b1ada2f1ae
25 changed files with 810 additions and 646 deletions
--- a/src/api/system.ts
+++ b/src/api/system.ts
@@ -5,8 +5,12 @@ type Result = {
  data?: {
    /** 列表数据 */
    list: Array<any>;
-    /** 总数 */
+    /** 总条目数 */
    total?: number;
+    /** 每页显示条目个数 */
+    pageSize?: number;
+    /** 当前页数 */
+    currentPage?: number;
  };
 };

--- a/src/components/ReIcon/src/Select.vue
+++ b/src/components/ReIcon/src/Select.vue
@@ -228,7 +228,7 @@ watch(
 :deep(.el-tabs__nav-wrap) {
  position: static;
  margin: 0;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 5px rgb(0 0 0 / 6%);
 }

 :deep(.el-tabs__content) {
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -200,7 +200,7 @@ export default defineComponent({

    return () => (
      <>
-        <div {...attrs} class="w-[99/100] mt-6 p-2 bg-bg_color">
+        <div {...attrs} class="w-[99/100] mt-4 px-2 pb-2 bg-bg_color">
          <div class="flex justify-between w-full h-[60px] p-4">
            <p class="font-bold truncate">{props.title}</p>
            <div class="flex items-center justify-around">
@@ -245,6 +245,7 @@ export default defineComponent({

              <el-popover
                v-slots={reference}
+                placement="bottom-start"
                popper-style={{ padding: 0 }}
                width="160"
                trigger="click"
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -12,7 +12,7 @@ export default {
  children: [
    {
      path: "/components/dialog",
-      name: "Dialog",
+      name: "DialogPage",
      component: () => import("@/views/components/dialog/index.vue"),
      meta: {
        title: $t("menus.hsdialog"),
@@ -51,7 +51,7 @@ export default {
    },
    {
      path: "/components/video",
-      name: "Video",
+      name: "VideoPage",
      component: () => import("@/views/components/video/index.vue"),
      meta: {
        title: $t("menus.hsvideo")
@@ -59,7 +59,7 @@ export default {
    },
    {
      path: "/components/map",
-      name: "Map",
+      name: "MapPage",
      component: () => import("@/views/components/map/index.vue"),
      meta: {
        title: $t("menus.hsmap"),
@@ -91,7 +91,7 @@ export default {
    },
    {
      path: "/components/button",
-      name: "Button",
+      name: "ButtonPage",
      component: () => import("@/views/components/button/index.vue"),
      meta: {
        title: $t("menus.hsbutton")
--- a/src/utils/http/index.ts
+++ b/src/utils/http/index.ts
@@ -63,7 +63,7 @@ class PureHttp {
      async (config: PureHttpRequestConfig): Promise<any> => {
        // 开启进度条动画
        NProgress.start();
-        // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
+        // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
        if (typeof config.beforeRequestCallback === "function") {
          config.beforeRequestCallback(config);
          return config;
@@ -123,7 +123,7 @@ class PureHttp {
        const $config = response.config;
        // 关闭进度条动画
        NProgress.done();
-        // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
+        // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
        if (typeof $config.beforeResponseCallback === "function") {
          $config.beforeResponseCallback(response);
          return response.data;
@@ -159,7 +159,7 @@ class PureHttp {
      ...axiosConfig
    } as PureHttpRequestConfig;

-    // 单独处理自定义请求/响应回掉
+    // 单独处理自定义请求/响应回调
    return new Promise((resolve, reject) => {
      PureHttp.axiosInstance
        .request(config)
--- a/src/views/components/button/index.vue
+++ b/src/views/components/button/index.vue
@@ -2,7 +2,7 @@
 import { ref } from "vue";

 defineOptions({
-  name: "Button"
+  name: "ButtonPage"
 });

 const { VITE_PUBLIC_PATH } = import.meta.env;
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -7,7 +7,7 @@ import forms, { type FormProps } from "./form.vue";
 import { addDialog, closeDialog, closeAllDialog } from "@/components/ReDialog";

 defineOptions({
-  name: "Dialog"
+  name: "DialogPage"
 });

 const router = useRouter();
--- a/src/views/components/map/index.vue
+++ b/src/views/components/map/index.vue
@@ -2,7 +2,7 @@
 import { Amap } from "@/components/ReMap";

 defineOptions({
-  name: "Map"
+  name: "MapPage"
 });
 </script>

--- a/src/views/components/video/index.vue
+++ b/src/views/components/video/index.vue
@@ -8,7 +8,7 @@ import Player from "xgplayer";
 import "xgplayer/dist/index.min.css";

 defineOptions({
-  name: "Video"
+  name: "VideoPage"
 });

 onMounted(() => {
--- a/src/views/components/waterfall/index.vue
+++ b/src/views/components/waterfall/index.vue
@@ -2,8 +2,10 @@
 import { getList } from "./api";
 import error from "./error.png";
 import loading from "./loading.png";
-import { onMounted, reactive, ref } from "vue";
+import { ElLoading } from "element-plus";
 import "vue-waterfall-plugin-next/dist/style.css";
+import InfiniteLoading from "v3-infinite-loading";
+import { onMounted, reactive, ref, nextTick } from "vue";
 import backTop from "@/assets/svg/back_top.svg?component";
 import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";

@@ -31,8 +33,8 @@ const options = reactive({
      rowPerView: 2
    }
  },
-  // 动画效果
-  animationEffect: "animate__fadeInUp",
+  // 动画效果 https://animate.style/
+  animationEffect: "animate__zoomInUp",
  // 动画时间
  animationDuration: 1000,
  // 动画延迟
@@ -53,15 +55,26 @@ const options = reactive({
 const page = ref(1);
 const list = ref([]);
 const pageSize = ref();
+const loadingInstance = ref();

 /** 加载更多 */
 function handleLoadMore() {
+  loadingInstance.value = ElLoading.service({
+    target: ".content",
+    background: "transparent",
+    text: "加载中"
+  });
  getList({
    page: page.value,
    pageSize: pageSize.value
  }).then(res => {
-    list.value.push(...res);
-    page.value += 1;
+    setTimeout(() => {
+      list.value.push(...res);
+      page.value += 1;
+      nextTick(() => {
+        loadingInstance.value.close();
+      });
+    }, 500);
  });
 }

@@ -79,73 +92,60 @@ onMounted(() => {
 </script>

 <template>
-  <el-card shadow="never" class="!h-[85vh]">
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          瀑布流组件，采用开源的
-          <el-link
-            href="https://github.com/heikaimu/vue3-waterfall-plugin"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            vue-waterfall-plugin-next
-          </el-link>
-        </span>
-      </div>
-    </template>
-    <el-scrollbar height="78vh" class="content">
-      <Waterfall :list="list" v-bind="options">
-        <template #item="{ item, url, index }">
-          <div
-            class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
-            @click="handleClick(item)"
-          >
-            <div class="overflow-hidden">
-              <LazyImg
-                :url="url"
-                class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
-              />
-            </div>
-            <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
-              <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
-                {{ item.name }}
-              </h4>
-              <div
-                class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
-              >
-                <div class="text-gray-50">$ {{ item.price }}</div>
-                <div>
-                  <button
-                    class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
-                    @click.stop="handleDelete(item, index)"
-                  >
-                    删除
-                  </button>
-                </div>
+  <el-scrollbar height="87vh" class="content">
+    <Waterfall :list="list" v-bind="options">
+      <template #item="{ item, url, index }">
+        <div
+          class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
+          @click="handleClick(item)"
+        >
+          <div class="overflow-hidden">
+            <LazyImg
+              :url="url"
+              class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
+            />
+          </div>
+          <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
+            <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
+              {{ item.name }}
+            </h4>
+            <div
+              class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
+            >
+              <div class="text-gray-50">$ {{ item.price }}</div>
+              <div>
+                <button
+                  class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
+                  @click.stop="handleDelete(item, index)"
+                >
+                  删除
+                </button>
              </div>
            </div>
          </div>
-        </template>
-      </Waterfall>
+        </div>
+      </template>
+    </Waterfall>

-      <div class="flex justify-center py-10">
+    <!-- <div class="flex justify-center py-10">
        <button
          class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
          @click="handleLoadMore"
        >
          加载更多
        </button>
-      </div>
+      </div> -->

-      <el-backtop
-        title="回到顶部"
-        :right="35"
-        :visibility-height="400"
-        target=".content .el-scrollbar__wrap"
-      >
-        <backTop />
-      </el-backtop>
-    </el-scrollbar>
-  </el-card>
+    <el-backtop
+      title="回到顶部"
+      :right="35"
+      :visibility-height="400"
+      target=".content .el-scrollbar__wrap"
+    >
+      <backTop />
+    </el-backtop>
+
+    <!-- 加载更多 -->
+    <InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
+  </el-scrollbar>
 </template>
--- a/src/views/system/dept/form.vue
+++ b/src/views/system/dept/form.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { formRules } from "./rule";
-import { FormProps } from "./types";
 import ReCol from "@/components/ReCol";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
 import { usePublicHooks } from "../hooks";

 const props = withDefaults(defineProps<FormProps>(), {
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useDept } from "./hook";
+import { useDept } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

@@ -35,7 +35,7 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="bg-bg_color w-[99/100] pl-8 pt-4"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
    >
      <el-form-item label="部门名称：" prop="name">
        <el-input
@@ -138,3 +138,11 @@ const {
    </PureTableBar>
  </div>
 </template>
+
+<style lang="scss" scoped>
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
--- a/src/views/system/dept/utils/hook.tsx
+++ b/src/views/system/dept/utils/hook.tsx
@@ -1,12 +1,12 @@
 import dayjs from "dayjs";
-import editForm from "./form.vue";
+import editForm from "../form.vue";
 import { handleTree } from "@/utils/tree";
-import { usePublicHooks } from "../hooks";
 import { message } from "@/utils/message";
 import { getDeptList } from "@/api/system";
-import { type FormItemProps } from "./types";
+import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
+import { type FormItemProps } from "../utils/types";
 import { cloneDeep, isAllEmpty } from "@pureadmin/utils";

 export function useDept() {
--- a/src/views/system/dept/utils/rule.ts
+++ b/src/views/system/dept/utils/rule.ts
--- a/src/views/system/dept/utils/types.ts
+++ b/src/views/system/dept/utils/types.ts
--- a/src/views/system/role/form.vue
+++ b/src/views/system/role/form.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    name: "",
+    code: "",
+    remark: ""
+  })
+});
+
+const ruleFormRef = ref();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-width="82px"
+  >
+    <el-form-item label="角色名称" prop="name">
+      <el-input
+        v-model="newFormInline.name"
+        clearable
+        placeholder="请输入角色名称"
+      />
+    </el-form-item>
+
+    <el-form-item label="角色标识" prop="code">
+      <el-input
+        v-model="newFormInline.code"
+        clearable
+        placeholder="请输入角色标识"
+      />
+    </el-form-item>
+
+    <el-form-item label="备注">
+      <el-input
+        v-model="newFormInline.remark"
+        placeholder="请输入备注信息"
+        type="textarea"
+      />
+    </el-form-item>
+  </el-form>
+</template>
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useRole } from "./hook";
+import { useRole } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

-import Database from "@iconify-icons/ri/database-2-line";
-import More from "@iconify-icons/ep/more-filled";
+// import Database from "@iconify-icons/ri/database-2-line";
+// import More from "@iconify-icons/ep/more-filled";
 import Delete from "@iconify-icons/ep/delete";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import Search from "@iconify-icons/ep/search";
@@ -24,11 +24,13 @@ const {
  columns,
  dataList,
  pagination,
-  buttonClass,
+  // buttonClass,
  onSearch,
  resetForm,
-  handleUpdate,
+  openDialog,
+  handleMenu,
  handleDelete,
+  // handleDatabase,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
@@ -41,7 +43,7 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="bg-bg_color w-[99/100] pl-8 pt-4"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
    >
      <el-form-item label="角色名称：" prop="name">
        <el-input
@@ -66,8 +68,8 @@ const {
          clearable
          class="!w-[180px]"
        >
-          <el-option label="已开启" value="1" />
-          <el-option label="已关闭" value="0" />
+          <el-option label="已启用" value="1" />
+          <el-option label="已停用" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
@@ -85,9 +87,17 @@ const {
      </el-form-item>
    </el-form>

-    <PureTableBar title="角色列表" :columns="columns" @refresh="onSearch">
+    <PureTableBar
+      title="角色列表（仅演示，操作后不生效）"
+      :columns="columns"
+      @refresh="onSearch"
+    >
      <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon(AddFill)">
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(AddFill)"
+          @click="openDialog()"
+        >
          新增角色
        </el-button>
      </template>
@@ -118,11 +128,24 @@ const {
              type="primary"
              :size="size"
              :icon="useRenderIcon(EditPen)"
-              @click="handleUpdate(row)"
+              @click="openDialog('编辑', row)"
            >
              修改
            </el-button>
-            <el-popconfirm title="是否确认删除?">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(Menu)"
+              @click="handleMenu"
+            >
+              菜单权限
+            </el-button>
+            <el-popconfirm
+              :title="`是否确认删除角色名称为${row.name}的这条数据`"
+              @confirm="handleDelete(row)"
+            >
              <template #reference>
                <el-button
                  class="reset-margin"
@@ -130,20 +153,18 @@ const {
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon(Delete)"
-                  @click="handleDelete(row)"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
-            <el-dropdown>
+            <!-- <el-dropdown>
              <el-button
                class="ml-3 mt-[2px]"
                link
                type="primary"
                :size="size"
                :icon="useRenderIcon(More)"
-                @click="handleUpdate(row)"
              />
              <template #dropdown>
                <el-dropdown-menu>
@@ -154,6 +175,7 @@ const {
                      type="primary"
                      :size="size"
                      :icon="useRenderIcon(Menu)"
+                      @click="handleMenu"
                    >
                      菜单权限
                    </el-button>
@@ -165,13 +187,14 @@ const {
                      type="primary"
                      :size="size"
                      :icon="useRenderIcon(Database)"
+                      @click="handleDatabase"
                    >
                      数据权限
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
-            </el-dropdown>
+            </el-dropdown> -->
          </template>
        </pure-table>
      </template>
@@ -183,4 +206,10 @@ const {
 :deep(.el-dropdown-menu__item i) {
  margin: 0;
 }
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
 </style>
--- a/src/views/system/role/utils/hook.tsx
+++ b/src/views/system/role/utils/hook.tsx
@@ -1,9 +1,13 @@
 import dayjs from "dayjs";
+import editForm from "../form.vue";
 import { message } from "@/utils/message";
 import { getRoleList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
+import { usePublicHooks } from "../../hooks";
+import { addDialog } from "@/components/ReDialog";
+import { type FormItemProps } from "../utils/types";
 import { type PaginationProps } from "@pureadmin/table";
-import { reactive, ref, computed, onMounted } from "vue";
+import { reactive, ref, onMounted, h, toRaw } from "vue";

 export function useRole() {
  const form = reactive({
@@ -11,9 +15,11 @@ export function useRole() {
    code: "",
    status: ""
  });
+  const formRef = ref();
  const dataList = ref([]);
  const loading = ref(true);
  const switchLoadMap = ref({});
+  const { switchStyle } = usePublicHooks();
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
@@ -21,19 +27,6 @@ export function useRole() {
    background: true
  });
  const columns: TableColumnList = [
-    // {
-    //   label: "勾选列", // 如果需要表格多选，此处label必须设置
-    //   type: "selection",
-    //   width: 55,
-    //   align: "left",
-    //   fixed: "left"
-    // },
-    {
-      label: "序号",
-      type: "index",
-      width: 70,
-      fixed: "left"
-    },
    {
      label: "角色编号",
      prop: "id",
@@ -49,25 +42,6 @@ export function useRole() {
      prop: "code",
      minWidth: 150
    },
-    {
-      label: "角色类型",
-      prop: "type",
-      minWidth: 150,
-      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={row.type === 1 ? "danger" : ""}
-          effect="plain"
-        >
-          {row.type === 1 ? "内置" : "自定义"}
-        </el-tag>
-      )
-    },
-    {
-      label: "显示顺序",
-      prop: "sort",
-      minWidth: 100
-    },
    {
      label: "状态",
      minWidth: 130,
@@ -78,13 +52,19 @@ export function useRole() {
          v-model={scope.row.status}
          active-value={1}
          inactive-value={0}
-          active-text="已开启"
-          inactive-text="已关闭"
+          active-text="已启用"
+          inactive-text="已停用"
          inline-prompt
+          style={switchStyle.value}
          onChange={() => onChange(scope as any)}
        />
      )
    },
+    {
+      label: "备注",
+      prop: "remark",
+      minWidth: 150
+    },
    {
      label: "创建时间",
      minWidth: 180,
@@ -95,19 +75,19 @@ export function useRole() {
    {
      label: "操作",
      fixed: "right",
-      width: 180,
+      width: 240,
      slot: "operation"
    }
  ];
-  const buttonClass = computed(() => {
-    return [
-      "!h-[20px]",
-      "reset-margin",
-      "!text-gray-500",
-      "dark:!text-white",
-      "dark:hover:!text-primary"
-    ];
-  });
+  // const buttonClass = computed(() => {
+  //   return [
+  //     "!h-[20px]",
+  //     "reset-margin",
+  //     "!text-gray-500",
+  //     "dark:!text-white",
+  //     "dark:hover:!text-primary"
+  //   ];
+  // });

  function onChange({ row, index }) {
    ElMessageBox.confirm(
@@ -115,7 +95,7 @@ export function useRole() {
        row.status === 0 ? "停用" : "启用"
      }</strong><strong style='color:var(--el-color-primary)'>${
        row.name
-      }</strong>角色吗?`,
+      }</strong>吗?`,
      "系统提示",
      {
        confirmButtonText: "确定",
@@ -141,7 +121,7 @@ export function useRole() {
              loading: false
            }
          );
-          message("已成功修改角色状态", {
+          message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
            type: "success"
          });
        }, 300);
@@ -151,12 +131,9 @@ export function useRole() {
      });
  }

-  function handleUpdate(row) {
-    console.log(row);
-  }
-
  function handleDelete(row) {
-    console.log(row);
+    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
+    onSearch();
  }

  function handleSizeChange(val: number) {
@@ -173,9 +150,12 @@ export function useRole() {

  async function onSearch() {
    loading.value = true;
-    const { data } = await getRoleList();
+    const { data } = await getRoleList(toRaw(form));
    dataList.value = data.list;
    pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
    setTimeout(() => {
      loading.value = false;
    }, 500);
@@ -187,6 +167,56 @@ export function useRole() {
    onSearch();
  };

+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}角色`,
+      props: {
+        formInline: {
+          name: row?.name ?? "",
+          code: row?.code ?? "",
+          remark: row?.remark ?? ""
+        }
+      },
+      width: "40%",
+      draggable: true,
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(`您${title}了角色名称为${curData.name}的这条数据`, {
+            type: "success"
+          });
+          done(); // 关闭弹框
+          onSearch(); // 刷新表格数据
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              chores();
+            } else {
+              // 实际开发先调用编辑接口，再进行下面操作
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  /** 菜单权限 */
+  function handleMenu() {
+    message("等菜单管理页面开发后完善");
+  }
+
+  /** 数据权限 可自行开发 */
+  // function handleDatabase() {}
+
  onMounted(() => {
    onSearch();
  });
@@ -197,11 +227,13 @@ export function useRole() {
    columns,
    dataList,
    pagination,
-    buttonClass,
+    // buttonClass,
    onSearch,
    resetForm,
-    handleUpdate,
+    openDialog,
+    handleMenu,
    handleDelete,
+    // handleDatabase,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange
--- a/src/views/system/role/utils/rule.ts
+++ b/src/views/system/role/utils/rule.ts
@@ -0,0 +1,8 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
+  code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
+});
--- a/src/views/system/role/utils/types.ts
+++ b/src/views/system/role/utils/types.ts
@@ -0,0 +1,15 @@
+// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
+
+interface FormItemProps {
+  /** 角色名称 */
+  name: string;
+  /** 角色编号 */
+  code: string;
+  /** 备注 */
+  remark: string;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+export type { FormItemProps, FormProps };
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -44,7 +44,7 @@ const {
        ref="formRef"
        :inline="true"
        :model="form"
-        class="bg-bg_color w-[99/100] pl-8 pt-4"
+        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
      >
        <el-form-item label="用户名称：" prop="username">
          <el-input
@@ -186,4 +186,10 @@ const {
 :deep(.el-dropdown-menu__item i) {
  margin: 0;
 }
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
 </style>