@gadmin2n/schematics 0.0.64 → 0.0.66

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/components/role-tag.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { CrownOutlined, StarOutlined, UserOutlined } from "@ant-design/icons";
+import { Tag, type TagProps } from "antd";
+
+type Props = {
+  role: any;
+};
+
+export const RoleTag: React.FC<Props> = ({ role }) => {
+  const variants: {
+    [key in any]: {
+      color: TagProps["color"];
+      icon: React.ReactNode;
+    };
+  } = {
+    ADMIN: {
+      color: "red",
+      icon: <CrownOutlined />,
+    },
+    SALES_INTERN: {
+      color: "blue",
+      icon: <UserOutlined />,
+    },
+    SALES_PERSON: {
+      color: "geekblue",
+      icon: <UserOutlined />,
+    },
+    SALES_MANAGER: {
+      color: "cyan",
+      icon: <StarOutlined />,
+    },
+  };
+
+  const text = role.replace("_", " ").toLowerCase();
+
+  return (
+    <Tag
+      style={{
+        textTransform: "capitalize",
+      }}
+      color={variants[role].color}
+      icon={variants[role].icon}
+    >
+      {text}
+    </Tag>
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/components/show-drawer.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+
+import { TagField } from "@refinedev/antd";
+import { useShow } from "@refinedev/core";
+
+import { CloseOutlined } from "@ant-design/icons";
+import { Button, Drawer, Space, Tag, Typography } from "antd";
+import dayjs from "dayjs";
+
+import styles from "@/styles/show-drawer.module.css";
+import { User } from "@/types";
+
+import { UserSelect } from "../queries";
+
+const { Title, Text } = Typography;
+
+interface ShowDrawerProps {
+  id?: number;
+  onClose: () => void;
+}
+
+export const ShowDrawer: React.FC<ShowDrawerProps> = ({ id, onClose }) => {
+  const { query } = useShow<User>({
+    resource: "user",
+    id,
+    meta: {
+      select: UserSelect,
+    },
+  });
+
+  const { data, isLoading, isError } = query;
+
+  if (isError) {
+    onClose();
+    return null;
+  }
+
+  const {
+    userid,
+    username,
+    roles,
+    isApiKey,
+    apiKey,
+    description,
+    isActive,
+    lastUsedAt,
+    creator,
+    createdAt,
+    updatedAt,
+  } = data?.data ?? {};
+
+  return (
+    <Drawer
+      open
+      onClose={onClose}
+      loading={isLoading}
+      width={756}
+      styles={{
+        body: { background: "#f5f5f5", padding: 0 },
+        header: { display: "none" },
+      }}
+    >
+      <div className={styles.header}>
+        <Button type="text" icon={<CloseOutlined />} onClick={onClose} />
+      </div>
+      <div className={styles.container}>
+        <div key="id">
+          <Title level={5}>ID</Title>
+          <Text>{id}</Text>
+        </div>
+        <div key="userid">
+          <Title level={5}>User ID</Title>
+          <Text>{userid}</Text>
+        </div>
+        <div key="username">
+          <Title level={5}>User Name</Title>
+          <Text>{username || "-"}</Text>
+        </div>
+        <div key="roles">
+          <Title level={5}>Roles</Title>
+          <Space>
+            {(Array.isArray(roles) ? roles : JSON.parse(roles || "[]"))?.map?.(
+              (v: string) => (
+                <TagField key={v} value={String(v)} />
+              )
+            )}
+          </Space>
+        </div>
+        <div key="isApiKey">
+          <Title level={5}>Is API Key</Title>
+          <Tag color={isApiKey ? "blue" : "default"}>
+            {isApiKey ? "Yes" : "No"}
+          </Tag>
+        </div>
+        {isApiKey && (
+          <>
+            <div key="apiKey">
+              <Title level={5}>API Key</Title>
+              <Text copyable={{ text: apiKey || "" }} style={{ fontFamily: "monospace" }}>
+                {apiKey || "-"}
+              </Text>
+            </div>
+            <div key="description">
+              <Title level={5}>Description</Title>
+              <Text>{description || "-"}</Text>
+            </div>
+            <div key="lastUsedAt">
+              <Title level={5}>Last Used At</Title>
+              <Text>
+                {lastUsedAt ? dayjs(lastUsedAt).format("YYYY-MM-DD HH:mm:ss") : "-"}
+              </Text>
+            </div>
+          </>
+        )}
+        <div key="isActive">
+          <Title level={5}>Is Active</Title>
+          <Tag color={isActive ? "green" : "red"}>
+            {isActive ? "Active" : "Inactive"}
+          </Tag>
+        </div>
+        <div key="creator">
+          <Title level={5}>Creator</Title>
+          <Text>{creator || "-"}</Text>
+        </div>
+        <div key="createdAt">
+          <Title level={5}>Created At</Title>
+          <Text>
+            {createdAt ? dayjs(createdAt).format("YYYY-MM-DD HH:mm:ss") : "-"}
+          </Text>
+        </div>
+        <div key="updatedAt">
+          <Title level={5}>Updated At</Title>
+          <Text>
+            {updatedAt ? dayjs(updatedAt).format("YYYY-MM-DD HH:mm:ss") : "-"}
+          </Text>
+        </div>
+      </div>
+    </Drawer>
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/index.ts

@@ -0,0 +1 @@
+export * from "./list";

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/list.tsx

@@ -0,0 +1,372 @@
+import React, { type PropsWithChildren, useState } from "react";
+
+import {
+  DeleteButton,
+  EditButton,
+  FilterDropdown,
+  List,
+  ShowButton,
+  useTable,
+} from "@refinedev/antd";
+import { getDefaultFilter, type HttpError, useGetIdentity } from "@refinedev/core";
+
+import { PlusOutlined, CodeOutlined } from "@ant-design/icons";
+import { Button, Form, Input, Select, Space, Table, Tag, Tooltip } from "antd";
+import debounce from "lodash/debounce";
+
+import {
+  CustomAvatar,
+  PaginationTotal,
+  RoleStatusTag,
+  Text,
+} from "@/components";
+import { useRoles } from "@/hooks/useRoles";
+import { User } from "@/types";
+
+import { CreateModal } from "./components/create-modal";
+import { EditModal } from "./components/edit-modal";
+import { ShowDrawer } from "./components/show-drawer";
+import { LIST_CONTENT_PROPS } from "@/constants/layout";
+import { SqlModal, generateUserSql } from "../../components/SqlModal";
+
+export const UserListPage: React.FC<PropsWithChildren> = ({ children }) => {
+  const [form] = Form.useForm();
+  const { data: identity } = useGetIdentity<any>();
+  
+  // Fetch roles from backend using custom hook
+  const { roleOptions, loading: rolesLoading } = useRoles();
+  
+  // We want to always parse the query string even when syncWithLocation is
+  // deactivated, for hotlinking to work properly.
+  // 转换布尔字段过滤器的值（从字符串 "Yes"/"No" 转为 boolean）
+  const transformBooleanFilters = (filters: any[]) => {
+    return filters.map((filter) => {
+      if (
+        (filter.field === "isApiKey" || filter.field === "isActive") &&
+        filter.operator === "eq"
+      ) {
+        let boolValue: boolean | undefined;
+        if (filter.value === "Yes" || filter.value === "Active") {
+          boolValue = true;
+        } else if (filter.value === "No" || filter.value === "Inactive") {
+          boolValue = false;
+        }
+        return { ...filter, value: boolValue };
+      }
+      return filter;
+    });
+  };
+
+  const {
+    tableProps,
+    searchFormProps,
+    filters,
+    sorters,
+    tableQuery: tableQueryResult,
+  } = useTable<User, HttpError, Partial<User>>({
+    resource: "user",
+    pagination: {
+      pageSize: 20,
+    },
+    onSearch: (values: Partial<User>) => {
+      return Object.entries(values)
+        .filter(([, value]) => value !== undefined && value !== "")
+        .map(([field, value]) => ({
+          field,
+          operator: "contains" as const,
+          value: value || "",
+        }));
+    },
+    // https://refine.dev/docs/ui-integrations/ant-design/components/filter-dropdown/#example
+    filters: {
+      initial: [
+        { field: "username", operator: "contains", value: "" },
+        { field: "roles", operator: "contains", value: "" },
+      ],
+      defaultBehavior: "merge",
+    },
+    sorters: {
+      initial: [],
+    },
+    meta: {
+      transformFn: transformBooleanFilters,
+    },
+  });
+
+  const onSearch = () => {
+    const values = form.getFieldsValue();
+    searchFormProps?.onFinish?.({
+      ...values,
+    });
+  };
+
+  const debouncedOnChange = debounce(onSearch, 500);
+
+  // fix for ant design filter dropdown contains operator
+  filters.map((filter) => {
+    if (filter.operator === "contains" && Array.isArray(filter.value)) {
+      filter.value = filter.value.join(",");
+    }
+  });
+
+  // 修改modal状态类型
+  const [showModal, setShowModal] = useState<{
+    type: "show" | "edit" | "create" | null;
+    id: number | null;
+  }>({
+    type: null,
+    id: null,
+  });
+
+  const [sqlModal, setSqlModal] = useState<{
+    open: boolean;
+    title: string;
+    sql: string;
+  }>({ open: false, title: "", sql: "" });
+
+  const handleShowSql = (record: any) => {
+    const operator = { authorId: identity?.userid, authorName: identity?.username };
+    const sql = generateUserSql(record, operator);
+    setSqlModal({ open: true, title: `SQL — User: ${record.userid}`, sql });
+  };
+
+  // 处理modal关闭
+  const handleModalClose = () => {
+    setShowModal({ type: null, id: null });
+  };
+
+  return (
+    <div className="page-container">
+      <List
+        breadcrumb={false}
+        contentProps={LIST_CONTENT_PROPS}
+        headerButtons={() => {
+          return (
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => setShowModal({ type: "create", id: null })}
+            >
+              Add User
+            </Button>
+          );
+        }}
+      >
+        <Table
+          {...tableProps}
+          pagination={{
+            ...tableProps.pagination,
+            showTotal: (total) => (
+              <PaginationTotal total={total} entityName="user" />
+            ),
+          }}
+          rowKey="id"
+        >
+          <Table.Column
+            dataIndex="userid"
+            title="User ID"
+            render={(_, record) => {
+              return (
+                <Space>
+                  <CustomAvatar
+                    shape="square"
+                    name={record.userid || ""}
+                    src={`https://rhrc.woa.com/photo/150/${record.userid}.png`}
+                  />
+                  <Text style={{ whiteSpace: "nowrap" }}>{record.userid}</Text>
+                </Space>
+              );
+            }}
+          />
+          <Table.Column
+            dataIndex="username"
+            title="User Name"
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...props}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Input />
+              </FilterDropdown>
+            )}
+            defaultFilteredValue={getDefaultFilter(
+              "username",
+              filters,
+              "contains"
+            )}
+            /*filterIcon={<SearchOutlined />}*/
+          />
+          <Table.Column
+            dataIndex="roles"
+            title="Roles"
+            defaultFilteredValue={getDefaultFilter(
+              "roles",
+              filters,
+              "contains"
+            )}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...props}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Select
+                  options={roleOptions}
+                  style={{ width: "150px" }}
+                  placeholder="Select Role"
+                  loading={rolesLoading}
+                />
+              </FilterDropdown>
+            )}
+            render={(value) => {
+              return JSON.parse(value || "[]").map(
+                (role: string) => (
+                  <RoleStatusTag key={role} role={role} />
+                )
+              );
+            }}
+          />
+          <Table.Column
+            dataIndex="isApiKey"
+            title="API Key"
+            defaultFilteredValue={getDefaultFilter("isApiKey", filters, "eq")}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...props}
+                mapValue={(selectedKeys) => {
+                  if (selectedKeys?.[0] === "Yes") return true;
+                  if (selectedKeys?.[0] === "No") return false;
+                  return selectedKeys;
+                }}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Select
+                  style={{ width: "120px" }}
+                  placeholder="Select"
+                  allowClear
+                  options={[
+                    { label: "Yes", value: "Yes" },
+                    { label: "No", value: "No" },
+                  ]}
+                />
+              </FilterDropdown>
+            )}
+            render={(value) => (
+              <Tag color={value ? "blue" : "default"}>
+                {value ? "Yes" : "No"}
+              </Tag>
+            )}
+          />
+          <Table.Column
+            dataIndex="isActive"
+            title="Active"
+            defaultFilteredValue={getDefaultFilter("isActive", filters, "eq")}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...props}
+                mapValue={(selectedKeys) => {
+                  if (selectedKeys?.[0] === "Active") return true;
+                  if (selectedKeys?.[0] === "Inactive") return false;
+                  return selectedKeys;
+                }}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Select
+                  style={{ width: "120px" }}
+                  placeholder="Select"
+                  allowClear
+                  options={[
+                    { label: "Active", value: "Active" },
+                    { label: "Inactive", value: "Inactive" },
+                  ]}
+                />
+              </FilterDropdown>
+            )}
+            render={(value) => (
+              <Tag color={value ? "green" : "red"}>
+                {value ? "Active" : "Inactive"}
+              </Tag>
+            )}
+          />
+          <Table.Column
+            fixed="right"
+            title="Actions"
+            dataIndex="actions"
+            render={(_, record) => {
+              return (
+                <Space>
+                  <ShowButton
+                    hideText
+                    size="small"
+                    style={{ backgroundColor: "transparent" }}
+                    onClick={() =>
+                      setShowModal({ type: "show", id: record.id })
+                    }
+                  />
+                  <EditButton
+                    hideText
+                    size="small"
+                    style={{ backgroundColor: "transparent" }}
+                    onClick={() =>
+                      setShowModal({ type: "edit", id: record.id })
+                    }
+                  />
+                  <Tooltip title="Generate SQL">
+                    <Button
+                      size="small"
+                      icon={<CodeOutlined />}
+                      style={{ backgroundColor: "transparent" }}
+                      onClick={() => handleShowSql(record)}
+                    />
+                  </Tooltip>
+                  <DeleteButton
+                    hideText
+                    size="small"
+                    recordItemId={record.id}
+                    style={{ backgroundColor: "transparent" }}
+                  />
+                </Space>
+              );
+            }}
+          />
+        </Table>
+      </List>
+
+      {/* Show Drawer */}
+      {showModal.type === "show" && showModal.id && (
+        <ShowDrawer id={showModal.id} onClose={handleModalClose} />
+      )}
+
+      {/* Edit Modal */}
+      {showModal.type === "edit" && showModal.id && (
+        <EditModal id={showModal.id} onClose={handleModalClose} />
+      )}
+
+      {/* Create Modal */}
+      {showModal.type === "create" && (
+        <CreateModal onClose={handleModalClose} />
+      )}
+
+      {/* SQL Modal */}
+      <SqlModal
+        open={sqlModal.open}
+        onClose={() => setSqlModal({ open: false, title: "", sql: "" })}
+        title={sqlModal.title}
+        sql={sqlModal.sql}
+      />
+
+      {children}
+    </div>
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/queries.ts

@@ -0,0 +1,14 @@
+export const UserSelect = {
+  id: true,
+  userid: true,
+  username: true,
+  roles: true,
+  isApiKey: true,
+  apiKey: true,
+  description: true,
+  isActive: true,
+  lastUsedAt: true,
+  creator: true,
+  createdAt: true,
+  updatedAt: true,
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/styles/antd.css

@@ -0,0 +1,132 @@
+.ant-modal {
+  .ant-modal-content {
+    padding: 0;
+  }
+
+  .ant-modal-header {
+    padding: 20px 24px;
+    border-bottom: 1px solid #d9d9d9;
+    margin-bottom: 0px;
+  }
+
+  .ant-modal-close {
+    top: 20px;
+  }
+
+  .ant-modal-body {
+    padding: 20px 24px;
+  }
+
+  .ant-modal-footer {
+    padding: 20px 24px;
+    border-top: 1px solid #d9d9d9;
+    margin-top: 0px;
+  }
+}
+
+.kanban-update-modal {
+  .ant-modal-body {
+    padding: 0px;
+  }
+
+  .ant-modal-footer {
+    border-top: none;
+    text-align: unset;
+  }
+}
+
+.ant-select.kanban-users-form-select {
+  .ant-select-selector {
+    background-color: #fff;
+  }
+}
+
+.audit-log-table {
+  .ant-table {
+    .ant-table-tbody {
+      & > tr.ant-table-row:hover > td {
+        background: none !important;
+      }
+    }
+
+    .ant-table-cell {
+      vertical-align: top;
+    }
+  }
+}
+
+.ant-picker-calendar {
+  .ant-picker-panel {
+    .ant-picker-body {
+      .ant-picker-cell {
+        .ant-picker-calendar-date-content {
+          height: 92px;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}
+
+.ant-pagination-total-text {
+  margin-right: auto;
+  font-size: 14px !important;
+  color: rgba(0, 0, 0, 0.45) !important;
+  margin-inline-end: auto !important;
+}
+
+.ant-color-picker {
+  .ant-popover-content {
+    .ant-collapse-header {
+      display: none;
+    }
+  }
+}
+
+.ant-table-cell {
+  white-space: nowrap;
+}
+
+th.ant-table-column-sort {
+  background-color: #fafafa !important;
+}
+
+td.ant-table-column-sort {
+  background-color: #ffffff !important;
+}
+
+.ant-table-tbody > tr > td {
+  padding: 12px 11.25px 11px 16px !important;
+}
+
+/* .ant-table-tbody > tr:first-child > td {
+    padding: 0px !important;
+} */
+
+.ant-page-header-content {
+  padding-block-start: 8px;
+}
+
+tr.ant-table-measure-row {
+  visibility: collapse;
+}
+.ant-carousel .slick-prev,
+.ant-carousel .slick-next,
+.ant-carousel .slick-prev:hover,
+.ant-carousel .slick-next:hover {
+  font-size: inherit;
+  color: currentColor;
+}
+
+.ant-spin-nested-loading,
+.ant-spin-container {
+  width: 100%;
+  height: 100%;
+}
+
+.ant-picker-input > input[disabled] {
+  color: #777 !important;
+}
+.ant-table-expanded-row-level-1 {
+  background-color: #eee;
+}