feat: 完成角色管理的编写

Author: Ohh-889

src/features/router/routes.ts

@@ -0,0 +1,112 @@
+import type { TFunction } from 'i18next';
+import type { RouteObject } from 'react-router-dom';
+
+type FlatRoute = {
+  name?: string;
+  path: string;
+};
+
+// 返回仅保留想要的字段
+interface SimpleRoute {
+  children?: SimpleRoute[];
+  key: string;
+  title?: string;
+}
+
+/**
+ * 将多级路由递归拍平成一个数组
+ *
+ * @param routes 原始路由数组
+ * @param parentPath 父级拼接后的 path，初始可传空字符串或 '/'
+ * @returns 拍平后的一维路由数组
+ */
+export function flattenLeafRoutes(routes: RouteObject[]) {
+  const flat: { name?: string; path: string }[] = [];
+
+  for (const route of routes) {
+    // 如果还有 children，就递归往下找叶子
+    if (route.children && route.children.length > 0) {
+      const childLeafs = flattenLeafRoutes(route.children);
+
+      flat.push(...childLeafs);
+    } else {
+      // 没有 children => 叶子路由
+
+      // eslint-disable-next-line no-lonely-if
+      if (route.path) {
+        const isHasIndex = Boolean(route.children?.[0]?.index);
+
+        if (isHasIndex || !route.children || route.children?.length < 1) {
+          flat.push({
+            name: route.id, // 根据需要保存 name，这里拿 route.id
+            path: route.path // path 可能为空字符串或undefined，统一成''
+          });
+        }
+      }
+      // 如果是 index 或者 有有效的 path => 收集
+    }
+  }
+
+  return flat;
+}
+
+// 判断是否是“路由组”
+// 约定：以 "(" 开头、")" 结尾的 id 为路由组
+function isRouteGroup(routeId?: string): boolean {
+  if (!routeId) return false;
+  return routeId.endsWith(')');
+}
+
+/** 过滤并展开路由组，同时过滤 handle.constant 为 true 的路由 保留 name、path、children */
+export function filterAndFlattenRoutes(routes: RouteObject[], t: TFunction): SimpleRoute[] {
+  const result: SimpleRoute[] = [];
+
+  for (const route of routes) {
+    // 1. 如果有 handle?.constant === true，直接跳过（不放到结果里）
+    if (
+      route.handle?.constant ||
+      route?.index ||
+      (route.children && route.children[0] && route.children[0].index && route.children[0].handle?.constant)
+    ) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
+    // 2. 如果是路由组，则“展开”它的子路由到同级
+    if (isRouteGroup(route.id)) {
+      // 继续处理它的 children，并将处理后的结果直接合并到当前 result
+      if (route.children && route.children.length > 0) {
+        const flattenedChildren = filterAndFlattenRoutes(route.children, t);
+        result.push(...flattenedChildren);
+      }
+    } else {
+      // 3. 否则是正常路由，保留 name、path、children
+      const newRoute: SimpleRoute = {
+        key: route.path || '',
+        title: t(`route.${route.id}`)
+      };
+
+      // 递归处理它的子路由
+      if (route.children && route.children.length > 0) {
+        newRoute.children = filterAndFlattenRoutes(route.children, t);
+      }
+
+      result.push(newRoute);
+    }
+  }
+
+  return result;
+}
+
+export function getFlatBaseRoutes(routes: FlatRoute[], t: TFunction) {
+  return routes.map(({ name, path }) => ({
+    label: t(`route.${name}`),
+    value: path
+  }));
+}
+
+export function getBaseChildrenRoutes(routes: RouteObject[]) {
+  const baseRoutes = routes[0].children?.find(item => item.id === '(base)')?.children;
+
+  return baseRoutes || [];
+}

src/pages/(base)/manage/role/index.tsx

@@ -1,5 +1,189 @@
+import { Suspense } from 'react';
+
+import { enableStatusRecord } from '@/constants/business';
+import { ATG_MAP } from '@/constants/common';
+import { TableHeaderOperation, useTable, useTableOperate, useTableScroll } from '@/features/table';
+import { fetchGetRoleList } from '@/service/api';
+
+import RoleSearch from './modules/role-search';
+
+const RoleOperateDrawer = lazy(() => import('./modules/role-operate-drawer'));
+
 const Role = () => {
-  return <div>Role</div>;
+  const { t } = useTranslation();
+
+  const isMobile = useMobile();
+
+  const { scrollConfig, tableWrapperRef } = useTableScroll();
+
+  const { columnChecks, data, run, searchProps, setColumnChecks, tableProps } = useTable({
+    apiFn: fetchGetRoleList,
+    apiParams: {
+      current: 1,
+      roleCode: undefined,
+      roleName: undefined,
+      size: 10,
+      status: undefined
+    },
+    columns: () => [
+      {
+        align: 'center',
+        dataIndex: 'index',
+        key: 'index',
+        title: t('common.index'),
+        width: 64
+      },
+      {
+        align: 'center',
+        dataIndex: 'roleName',
+        key: 'roleName',
+        minWidth: 120,
+        title: t('page.manage.role.roleName')
+      },
+      {
+        align: 'center',
+        dataIndex: 'roleCode',
+        key: 'roleCode',
+        minWidth: 120,
+        title: t('page.manage.role.roleCode')
+      },
+      {
+        dataIndex: 'roleDesc',
+        key: 'roleDesc',
+        minWidth: 120,
+        title: t('page.manage.role.roleDesc')
+      },
+      {
+        align: 'center',
+        dataIndex: 'status',
+        key: 'status',
+        render: (_, record) => {
+          if (record.status === null) {
+            return null;
+          }
+          const label = t(enableStatusRecord[record.status]);
+          return <ATag color={ATG_MAP[record.status]}>{label}</ATag>;
+        },
+        title: t('page.manage.user.userStatus'),
+        width: 100
+      },
+      {
+        align: 'center',
+        key: 'operate',
+        render: (_, record) => (
+          <div className="flex-center gap-8px">
+            <AButton
+              ghost
+              size="small"
+              type="primary"
+              onClick={() => edit(record.id)}
+            >
+              {t('common.edit')}
+            </AButton>
+
+            <APopconfirm
+              title={t('common.confirmDelete')}
+              onConfirm={() => handleDelete(record.id)}
+            >
+              <AButton
+                danger
+                size="small"
+              >
+                {t('common.delete')}
+              </AButton>
+            </APopconfirm>
+          </div>
+        ),
+        title: t('common.operate'),
+        width: 195
+      }
+    ]
+  });
+
+  const {
+    checkedRowKeys,
+    editingData,
+    generalPopupOperation,
+    handleAdd,
+    handleEdit,
+    onBatchDeleted,
+    onDeleted,
+    rowSelection
+  } = useTableOperate(data, run, async (res, type) => {
+    if (type === 'add') {
+      // add request 调用新增的接口
+      console.log(res);
+    } else {
+      // edit request 调用编辑的接口
+      console.log(res);
+    }
+  });
+
+  async function handleBatchDelete() {
+    // request
+    console.log(checkedRowKeys);
+    onBatchDeleted();
+  }
+
+  function handleDelete(id: number) {
+    // request
+    console.log(id);
+
+    onDeleted();
+  }
+
+  function edit(id: number) {
+    handleEdit(id);
+  }
+
+  return (
+    <div className="h-full min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+      <ACollapse
+        bordered={false}
+        className="card-wrapper"
+        defaultActiveKey={isMobile ? undefined : '1'}
+        items={[
+          {
+            children: <RoleSearch {...searchProps} />,
+            key: '1',
+            label: t('common.search')
+          }
+        ]}
+      />
+
+      <ACard
+        className="flex-col-stretch sm:flex-1-hidden card-wrapper"
+        ref={tableWrapperRef}
+        title={t('page.manage.role.title')}
+        variant="borderless"
+        extra={
+          <TableHeaderOperation
+            add={handleAdd}
+            columns={columnChecks}
+            disabledDelete={checkedRowKeys.length === 0}
+            loading={tableProps.loading}
+            refresh={run}
+            setColumnChecks={setColumnChecks}
+            onDelete={handleBatchDelete}
+          />
+        }
+      >
+        <ATable
+          rowSelection={rowSelection}
+          scroll={scrollConfig}
+          size="small"
+          {...tableProps}
+        />
+
+        <Suspense>
+          <RoleOperateDrawer
+            {...generalPopupOperation}
+            rowId={editingData?.id || -1}
+          />
+        </Suspense>
+      </ACard>
+    </div>
+  );
 };
 
 export default Role;

src/pages/(base)/manage/role/modules/button-auth-modal.tsx

@@ -0,0 +1,90 @@
+import type { DataNode } from 'antd/es/tree';
+
+import type { ModulesProps } from './type';
+
+const ButtonAuthModal: FC<ModulesProps> = memo(({ onClose, open, roleId }) => {
+  const { t } = useTranslation();
+
+  const title = t('common.edit') + t('page.manage.role.buttonAuth');
+
+  const [checks, setChecks] = useState<number[]>();
+
+  const [tree, setTree] = useState<DataNode[]>();
+
+  async function getChecks() {
+    console.log(roleId);
+    // request
+    setChecks([1, 2, 3, 4, 5]);
+  }
+
+  async function getAllButtons() {
+    // request
+    setTree([
+      { key: 1, title: 'button1' },
+      { key: 2, title: 'button2' },
+      { key: 3, title: 'button3' },
+      { key: 4, title: 'button4' },
+      { key: 5, title: 'button5' },
+      { key: 6, title: 'button6' },
+      { key: 7, title: 'button7' },
+      { key: 8, title: 'button8' },
+      { key: 9, title: 'button9' },
+      { key: 10, title: 'button10' }
+    ]);
+  }
+
+  function handleSubmit() {
+    console.log(checks, roleId);
+    // request
+
+    window.$message?.success?.(t('common.modifySuccess'));
+
+    onClose();
+  }
+
+  function init() {
+    getAllButtons();
+    getChecks();
+  }
+
+  useMount(() => {
+    init();
+  });
+
+  return (
+    <AModal
+      className="w-480px"
+      open={open}
+      title={title}
+      footer={
+        <ASpace className="mt-16px">
+          <AButton
+            size="small"
+            onClick={onClose}
+          >
+            {t('common.cancel')}
+          </AButton>
+          <AButton
+            size="small"
+            type="primary"
+            onClick={handleSubmit}
+          >
+            {t('common.confirm')}
+          </AButton>
+        </ASpace>
+      }
+      onCancel={onClose}
+    >
+      <ATree
+        checkable
+        checkedKeys={checks}
+        className="h-280px"
+        height={280}
+        treeData={tree}
+        onCheck={value => setChecks(value as number[])}
+      />
+    </AModal>
+  );
+});
+
+export default ButtonAuthModal;