build: 引入tailwindcss并迁移原有样式到原子类

1. 新增postcss、autoprefixer、tailwindcss依赖并初始化配置
2. 移除全局及页面级CSS文件，将样式替换为tailwind原子类
3. 重构API调用逻辑，拆分接口请求函数
4. 统一项目样式规范，优化布局与组件样式

src/Role/PermissionTreePicker.tsx

@@ -137,7 +137,7 @@ export function PermissionTreePicker({
     const checkedKeys = value.map((id) => permissionKey(id));
 
     return (
-        <div className="permission-tree-panel">
+        <div className="mb-[15px] h-[360px] overflow-auto rounded-md border border-line bg-panel px-4 py-3">
             <Tree
                 blockNode
                 checkable

src/Role/index.css

@@ -1,23 +0,0 @@
-.form-label {
-  margin: 0 0 8px;
-  color: #4e5969;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.form-help {
-  margin: -12px 0 18px;
-  color: #86909c;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-.permission-tree-panel {
-  height: 360px;
-  overflow: auto;
-  margin-bottom: 15px;
-  padding: 12px 16px;
-  border: 1px solid #e5e6eb;
-  border-radius: 6px;
-  background: #fbfcfd;
-}

src/Role/index.tsx

@@ -2,10 +2,9 @@ import { useState } from "react";
 import { Button, Card, Form, Input, Message, Modal, Space, Table, Tag } from "@arco-design/web-react";
 import { IconPlus } from "@arco-design/web-react/icon";
 import type { Permission, Role } from "../api/types";
-import { api } from "../api/client";
+import { createRole as createRoleApi, updateRolePermissions } from "../api/roles";
 import { usePageData } from "../hooks/usePageData";
 import { PermissionTreePicker } from "./PermissionTreePicker";
-import "./index.css";
 
 function RolesPage() {
     const { data, loading, reload, changePage } = usePageData<Role>("/api/admin/v1/roles");
@@ -28,7 +27,7 @@ function RolesPage() {
     const createRole = async (values: { code: string; name: string; description?: string }) => {
         setCreatingRole(true);
         try {
-            await api.post("/api/admin/v1/roles", {
+            await createRoleApi({
                 ...values,
                 permissionIds: createPermissionIds,
             });
@@ -52,9 +51,7 @@ function RolesPage() {
         }
         setSavingPermissions(true);
         try {
-            await api.patch(`/api/admin/v1/roles/${selectedRole.id}/permissions`, {
-                permissionIds: selectedPermissionIds,
-            });
+            await updateRolePermissions(selectedRole.id, selectedPermissionIds);
             Message.success("角色权限已更新");
             setAssignmentVisible(false);
             await reload();
@@ -122,7 +119,7 @@ function RolesPage() {
                     </Form.Item>
                     <div className="form-label">权限设置</div>
                     <PermissionTreePicker permissions={permissions.data.list} value={createPermissionIds} onChange={setCreatePermissionIds} />
-                    <div className="form-help">为角色分配系统权限，决定拥有此角色的用户可以进行的操作</div>
+                    <div className="form-help mt-5">为角色分配系统权限，决定拥有此角色的用户可以进行的操作</div>
                     <div className="modal-actions">
                         <Button onClick={() => setCreateVisible(false)}>取消</Button>
                         <Button type="primary" htmlType="submit" loading={creatingRole}>