@appthen/cli 1.2.11 → 1.2.12

package/tests/test-app/src/pages/RoleManagement.tsx

@@ -0,0 +1,523 @@
+/**
+ * 角色权限管理
+ * 管理系统角色和权限配置
+ *
+ * @type Page
+ * @route /rolesabc
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  systemId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  roles?: {
+    /* @example 1 */id?: number,
+    /* @example 超级管理员 */name?: string,
+    /* @example SUPER_ADMIN */code?: string,
+    /* @example 拥有所有权限 */description?: string,
+    /* @example 3 */userCount?: number,
+    /* @example active */status?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  permissions?: {
+    /* @example 1 */id?: number,
+    /* @example 用户管理 */name?: string,
+    /* @example user:manage */key?: string,
+    /* @example 系统管理 */category?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+  selectedRole?: any;
+  showAddModal?: boolean;
+  showEditModal?: boolean;
+  showPermissionDrawer?: boolean;
+  @Form({
+    setter: "JsonSetter"
+  })
+  currentPermissions?: string[];
+  formData?: {
+    name?: string,
+    description?: string,
+    code?: string,
+  };
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    roles: [
+      {
+        id: 1,
+        name: '超级管理员',
+        code: 'SUPER_ADMIN',
+        description: '拥有所有权限',
+        userCount: 3,
+        status: 'active',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        name: '管理员',
+        code: 'ADMIN',
+        description: '管理系统大部分功能',
+        userCount: 8,
+        status: 'active',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        name: '编辑',
+        code: 'EDITOR',
+        description: '内容编辑权限',
+        userCount: 15,
+        status: 'active',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        name: '审核员',
+        code: 'VIEWER',
+        description: '内容审核权限',
+        userCount: 5,
+        status: 'active',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        name: '访客',
+        code: 'GUEST',
+        description: '只读权限',
+        userCount: 45,
+        status: 'active',
+        createTime: '2024-05-12',
+      },
+    ],
+    permissions: [
+      { id: 1, name: '用户管理', key: 'user:manage', category: '系统管理' },
+      { id: 2, name: '角色管理', key: 'role:manage', category: '系统管理' },
+      {
+        id: 3,
+        name: '权限管理',
+        key: 'permission:manage',
+        category: '系统管理',
+      },
+      { id: 4, name: '内容编辑', key: 'content:edit', category: '内容管理' },
+      { id: 5, name: '内容发布', key: 'content:publish', category: '内容管理' },
+      { id: 6, name: '内容审核', key: 'content:review', category: '内容管理' },
+      { id: 7, name: '数据导出', key: 'data:export', category: '数据管理' },
+      { id: 8, name: '报表查看', key: 'report:view', category: '数据管理' },
+    ],
+    loading: false,
+    searchKeyword: '',
+    selectedRole: null,
+    showAddModal: false,
+    showEditModal: false,
+    showPermissionDrawer: false,
+    currentPermissions: [],
+    formData: { name: '', description: '', code: '' },
+  };
+
+  handleSearch(keyword) {
+    this.setState({
+      searchKeyword: keyword,
+    });
+  }
+
+  getRoleById(id) {
+    return this.state.roles.find(role => role.id === id);
+  }
+
+  getPermissionKeys(roleId) {
+    const role = this.state.roles.find(r => r.id === roleId);
+    return role?.permissions || [];
+  }
+
+  getStatusTag(status) {
+    if (status === 'active') {
+      return <Tag color="green">启用</Tag>;
+    }
+    return <Tag color="red">禁用</Tag>;
+  }
+
+  handleAddRole() {
+    this.setState({
+      showAddModal: true,
+      formData: {
+        name: '',
+        description: '',
+        code: '',
+      },
+    });
+  }
+
+  buildPermissionTree(permissions) {
+    const categories = {};
+    permissions.forEach(p => {
+      if (!categories[p.category]) {
+        categories[p.category] = [];
+      }
+      categories[p.category].push({
+        title: p.name,
+        key: p.key,
+        isLeaf: true,
+      });
+    });
+    return Object.keys(categories).map(category => ({
+      title: category,
+      key: category,
+      children: categories[category],
+    }));
+  }
+
+  async handleSubmit(type) {
+    await new Promise(resolve => setTimeout(resolve, 500));
+    if (type === 'add') {
+      console.log('添加角色:', this.state.formData);
+    } else {
+      console.log('编辑角色:', this.state.formData);
+    }
+    this.setState({
+      showAddModal: false,
+      showEditModal: false,
+    });
+  }
+
+  handleEditRole(role) {
+    this.setState({
+      selectedRole: role,
+      formData: {
+        ...role,
+      },
+      showEditModal: true,
+    });
+  }
+
+  handleDeleteRole(id) {
+    const confirm = window.confirm('确定要删除这个角色吗？');
+    if (confirm) {
+      console.log('删除角色:', id);
+    }
+  }
+
+  handleOpenPermissionDrawer(role) {
+    this.setState({
+      selectedRole: role,
+      showPermissionDrawer: true,
+      currentPermissions: role?.permissions || [],
+    });
+  }
+
+  render() {
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <Text className="text-2xl font-bold text-[#1f2937]">
+            角色权限管理
+          </Text>
+          <Text className="text-[#6b7280] text-sm mt-[4px]">
+            管理系统角色和权限配置
+          </Text>
+        </View>
+        <View className="mb-[24px] flex items-center justify-between">
+          <View className="gap-4 flex items-center">
+            <Input
+              placeholder="搜索角色名称/编码"
+              value={this.state.searchKeyword}
+              onChange={e => this.handleSearch(e.target.value)}
+              prefix="🔍"
+              className=""
+            />
+          </View>
+          <Button type="primary" onClick={() => this.handleAddRole()}>
+            + 新增角色
+          </Button>
+        </View>
+        <Table
+          loading={this.state.loading}
+          columns={[
+            { title: 'ID', dataIndex: 'id', key: 'id', width: 60 },
+            { title: '角色名称', dataIndex: 'name', key: 'name' },
+            {
+              title: '角色编码',
+              dataIndex: 'code',
+              key: 'code',
+              render: code => (
+                <Tag color="blue">
+                  <Text>{code}</Text>
+                </Tag>
+              ),
+            },
+            { title: '描述', dataIndex: 'description', key: 'description' },
+            {
+              title: '用户数',
+              dataIndex: 'userCount',
+              key: 'userCount',
+              render: count => <Text>{count}人</Text>,
+            },
+            {
+              title: '状态',
+              dataIndex: 'status',
+              key: 'status',
+              render: function (status) {
+                return this.getStatusTag(status);
+              },
+            },
+            { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
+            {
+              title: '操作',
+              key: 'action',
+              render: (text, record) => (
+                <Space>
+                  <Button
+                    type="link"
+                    onClick={() => this.handleEditRole(record)}
+                  >
+                    编辑
+                  </Button>
+                  <Button
+                    type="link"
+                    onClick={() => this.handleOpenPermissionDrawer(record)}
+                  >
+                    权限配置
+                  </Button>
+                  <Button
+                    type="link"
+                    danger={true}
+                    onClick={() => this.handleDeleteRole(record.id)}
+                  >
+                    删除
+                  </Button>
+                </Space>
+              ),
+            },
+          ]}
+          dataSource={this.state.roles?.filter(function (role) {
+            return (
+              role?.name?.includes(this.state.searchKeyword) ||
+              role?.code?.includes(this.state.searchKeyword)
+            );
+          })}
+          rowKey="id"
+          pagination={{
+            pageSize: 10,
+            showTotal: function (total) {
+              return `共 ${total} 条`;
+            },
+          }}
+        />
+        <Modal
+          animate="pop"
+          visible={this.state.showAddModal}
+          renderView={() => (
+            <View className="bg-[#ffffff] w-[600px] h-[500px] p-[24px]">
+              <Text className="text-xl font-bold mb-[16px]">新增角色</Text>
+              <View className="space-y-4">
+                <View>
+                  <Text className="block mb-[8px]">角色名称</Text>
+                  <Input
+                    value={this.state.formData.name}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          name: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入角色名称"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">角色编码</Text>
+                  <Input
+                    value={this.state.formData.code}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          code: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入角色编码"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">描述</Text>
+                  <Input.TextArea
+                    value={this.state.formData.description}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          description: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入描述"
+                    rows={4}
+                  />
+                </View>
+                <View className="gap-2 flex justify-end mt-[24px]">
+                  <Button
+                    onClick={() =>
+                      this.setState({
+                        showAddModal: false,
+                      })
+                    }
+                  >
+                    取消
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => this.handleSubmit('add')}
+                  >
+                    确认
+                  </Button>
+                </View>
+              </View>
+            </View>
+          )}
+          maskClosable={true}
+        />
+        <Modal
+          animate="pop"
+          visible={this.state.showEditModal}
+          renderView={() => (
+            <View className="bg-[#ffffff] w-[600px] h-[500px] p-[24px]">
+              <Text className="text-xl font-bold mb-[16px]">
+                编辑角色:{this.state.selectedRole?.name}
+              </Text>
+              <View className="space-y-4">
+                <View>
+                  <Text className="block mb-[8px]">角色名称</Text>
+                  <Input
+                    value={this.state.formData.name}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          name: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入角色名称"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">角色编码</Text>
+                  <Input
+                    value={this.state.formData.code}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          code: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入角色编码"
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">描述</Text>
+                  <Input.TextArea
+                    value={this.state.formData.description}
+                    onChange={e =>
+                      this.setState({
+                        formData: {
+                          ...this.state.formData,
+                          description: e.target.value,
+                        },
+                      })
+                    }
+                    placeholder="请输入描述"
+                    rows={4}
+                  />
+                </View>
+                <View className="gap-2 flex justify-end mt-[24px]">
+                  <Button
+                    onClick={() =>
+                      this.setState({
+                        showEditModal: false,
+                      })
+                    }
+                  >
+                    取消
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => this.handleSubmit('edit')}
+                  >
+                    确认
+                  </Button>
+                </View>
+              </View>
+            </View>
+          )}
+          maskClosable={true}
+        />
+        <Drawer
+          title="权限配置"
+          placement="right"
+          width={600}
+          visible={this.state.showPermissionDrawer}
+          renderView={() => (
+            <View className="p-[24px]">
+              <Text className="font-bold mb-[16px]">
+                角色:{this.state.selectedRole?.name}
+              </Text>
+              <Text className="text-[#6b7280] mb-[16px]">
+                请选择该角色拥有的权限
+              </Text>
+              <Tree
+                checkable={true}
+                treeData={this.buildPermissionTree(this.state.permissions)}
+                checkedKeys={this.state.currentPermissions}
+                onCheck={keys =>
+                  this.setState({
+                    currentPermissions: keys,
+                  })
+                }
+              />
+              <View className="gap-2 flex justify-end mt-[24px]">
+                <Button
+                  onClick={() =>
+                    this.setState({
+                      showPermissionDrawer: false,
+                    })
+                  }
+                >
+                  取消
+                </Button>
+                <Button
+                  type="primary"
+                  onClick={() =>
+                    console.log('保存权限:', this.state.currentPermissions)
+                  }
+                >
+                  保存
+                </Button>
+              </View>
+            </View>
+          )}
+          onClose={() =>
+            this.setState({
+              showPermissionDrawer: false,
+            })
+          }
+        />
+      </Page>
+    );
+  }
+}
+
+export default Document;