com-angel-authorization 1.0.0 → 1.0.2

package/dist/vue/index.js

@@ -197,15 +197,617 @@ var Can = defineComponent({
   }
 });
 
+// src/vue/ResourceManager.ts
+import {
+  defineComponent as defineComponent2,
+  h,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from "vue";
+import {
+  RESOURCE_PRIVATE_OPTIONS,
+  RESOURCE_STATUS_ENABLED,
+  RESOURCE_STATUS_OPTIONS
+} from "../resources";
+var PAGE_SIZE_OPTIONS = ["10", "20", "50", "100"];
+function emptyForm() {
+  return {
+    name: "",
+    identification: "",
+    status: RESOURCE_STATUS_ENABLED,
+    private: false,
+    description: ""
+  };
+}
+var s = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    padding: "16px",
+    color: "#101828",
+    fontFamily: '"PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif'
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "12px"
+  },
+  title: { margin: "0", fontSize: "18px", fontWeight: "600" },
+  toolbarRight: { display: "flex", alignItems: "center", gap: "8px" },
+  error: {
+    padding: "10px 12px",
+    borderRadius: "8px",
+    background: "#fef3f2",
+    color: "#b42318",
+    fontSize: "13px"
+  },
+  tableWrap: {
+    overflow: "auto",
+    border: "1px solid #eaecf0",
+    borderRadius: "10px",
+    background: "#fff"
+  },
+  table: { width: "100%", borderCollapse: "collapse", minWidth: "720px" },
+  th: {
+    textAlign: "left",
+    padding: "12px 14px",
+    fontSize: "13px",
+    fontWeight: "600",
+    color: "#475467",
+    background: "#f9fafb",
+    borderBottom: "1px solid #eaecf0"
+  },
+  td: {
+    padding: "12px 14px",
+    fontSize: "14px",
+    borderBottom: "1px solid #f2f4f7",
+    verticalAlign: "middle"
+  },
+  empty: {
+    padding: "28px",
+    textAlign: "center",
+    color: "#98a2b3",
+    fontSize: "14px"
+  },
+  code: {
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    fontSize: "13px",
+    background: "#f2f4f7",
+    padding: "2px 6px",
+    borderRadius: "4px"
+  },
+  badge: {
+    display: "inline-block",
+    padding: "2px 8px",
+    borderRadius: "999px",
+    fontSize: "12px",
+    fontWeight: "500"
+  },
+  linkBtn: {
+    border: "none",
+    background: "transparent",
+    color: "#049BAD",
+    cursor: "pointer",
+    padding: "0 8px 0 0",
+    fontSize: "13px"
+  },
+  pagination: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "12px"
+  },
+  pageSize: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "13px",
+    color: "#475467"
+  },
+  pageBtns: { display: "flex", gap: "8px" },
+  primaryBtn: {
+    border: "none",
+    background: "#049BAD",
+    color: "#fff",
+    borderRadius: "8px",
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: "14px"
+  },
+  secondaryBtn: {
+    border: "1px solid #d0d5dd",
+    background: "#fff",
+    color: "#344054",
+    borderRadius: "8px",
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: "14px"
+  },
+  select: {
+    border: "1px solid #d0d5dd",
+    borderRadius: "6px",
+    padding: "4px 8px",
+    fontSize: "13px"
+  },
+  mask: {
+    position: "fixed",
+    inset: "0",
+    background: "rgba(16, 24, 40, 0.45)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: "1000",
+    padding: "16px"
+  },
+  dialog: {
+    width: "100%",
+    maxWidth: "480px",
+    background: "#fff",
+    borderRadius: "12px",
+    boxShadow: "0 20px 40px rgba(16,24,40,0.18)"
+  },
+  dialogHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "14px 16px",
+    borderBottom: "1px solid #eaecf0"
+  },
+  dialogTitle: { margin: "0", fontSize: "16px", fontWeight: "600" },
+  iconBtn: {
+    border: "none",
+    background: "transparent",
+    fontSize: "22px",
+    lineHeight: "1",
+    cursor: "pointer",
+    color: "#667085"
+  },
+  form: { display: "flex", flexDirection: "column", gap: "12px", padding: "16px" },
+  field: { display: "flex", flexDirection: "column", gap: "6px" },
+  label: { fontSize: "13px", color: "#344054", fontWeight: "500" },
+  input: {
+    border: "1px solid #d0d5dd",
+    borderRadius: "8px",
+    padding: "8px 10px",
+    fontSize: "14px",
+    outline: "none"
+  },
+  dialogFooter: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px",
+    paddingTop: "4px"
+  }
+};
+var ResourceManager = defineComponent2({
+  name: "ResourceManager",
+  props: {
+    api: {
+      type: Object,
+      required: true
+    },
+    title: {
+      type: String,
+      default: "\u6743\u9650\u70B9\u7BA1\u7406"
+    },
+    pageSize: {
+      type: String,
+      default: "20"
+    }
+  },
+  setup(props, { slots }) {
+    const records = ref([]);
+    const loading = ref(false);
+    const error = ref("");
+    const pageSize = ref(props.pageSize);
+    const pageToken = ref("");
+    const hasPreviousPage = ref(false);
+    const hasNextPage = ref(false);
+    const dialogOpen = ref(false);
+    const editing = ref(null);
+    const form = reactive(emptyForm());
+    const saving = ref(false);
+    const statusLabel = Object.fromEntries(
+      RESOURCE_STATUS_OPTIONS.map((o) => [o.value, o.label])
+    );
+    async function loadList(direction = "current", token = pageToken.value) {
+      loading.value = true;
+      error.value = "";
+      try {
+        const result = await props.api.list({
+          pagination: {
+            pageToken: token,
+            pageSize: pageSize.value,
+            pageDirection: direction
+          }
+        });
+        records.value = result.records;
+        pageToken.value = result.pageToken;
+        hasPreviousPage.value = result.hasPreviousPage;
+        hasNextPage.value = result.hasNextPage;
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : "\u52A0\u8F7D\u5931\u8D25";
+      } finally {
+        loading.value = false;
+      }
+    }
+    function openCreate() {
+      editing.value = null;
+      Object.assign(form, emptyForm());
+      dialogOpen.value = true;
+    }
+    function openEdit(row) {
+      editing.value = row;
+      Object.assign(form, {
+        name: row.name,
+        identification: row.identification,
+        status: row.status,
+        private: row.private,
+        description: row.description
+      });
+      dialogOpen.value = true;
+    }
+    function closeDialog() {
+      if (!saving.value) dialogOpen.value = false;
+    }
+    async function handleSubmit(event) {
+      event.preventDefault();
+      if (!form.name.trim()) {
+        error.value = "\u8BF7\u586B\u5199\u6743\u9650\u540D\u79F0";
+        return;
+      }
+      if (!form.identification.trim()) {
+        error.value = "\u8BF7\u586B\u5199\u63A5\u53E3\u6807\u8BC6";
+        return;
+      }
+      saving.value = true;
+      error.value = "";
+      try {
+        if (editing.value) {
+          await props.api.update(editing.value.resourceId, { ...form });
+        } else {
+          await props.api.create({ ...form });
+        }
+        dialogOpen.value = false;
+        await loadList("current", "");
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : "\u4FDD\u5B58\u5931\u8D25";
+      } finally {
+        saving.value = false;
+      }
+    }
+    async function handleDelete(row) {
+      if (!window.confirm(`\u786E\u8BA4\u5220\u9664\u6743\u9650\u70B9\u300C${row.name}\u300D\uFF1F`)) return;
+      error.value = "";
+      try {
+        await props.api.remove(row.resourceId);
+        await loadList("current", "");
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : "\u5220\u9664\u5931\u8D25";
+      }
+    }
+    onMounted(() => {
+      void loadList("current", "");
+    });
+    watch(
+      () => [props.api, pageSize.value],
+      () => {
+        pageToken.value = "";
+        void loadList("current", "");
+      }
+    );
+    return () => h("div", { style: s.root }, [
+      h("div", { style: s.toolbar }, [
+        h("h2", { style: s.title }, props.title),
+        h("div", { style: s.toolbarRight }, [
+          slots.toolbarExtra?.(),
+          h(
+            "button",
+            { type: "button", style: s.primaryBtn, onClick: openCreate },
+            "\u65B0\u589E"
+          )
+        ])
+      ]),
+      error.value ? h("div", { style: s.error }, error.value) : null,
+      h("div", { style: s.tableWrap }, [
+        h("table", { style: s.table }, [
+          h("thead", [
+            h("tr", [
+              h("th", { style: s.th }, "\u6743\u9650\u540D\u79F0"),
+              h("th", { style: s.th }, "\u63A5\u53E3\u6807\u8BC6"),
+              h("th", { style: s.th }, "\u63CF\u8FF0"),
+              h("th", { style: { ...s.th, width: "90px" } }, "\u72B6\u6001"),
+              h("th", { style: { ...s.th, width: "140px" } }, "\u64CD\u4F5C")
+            ])
+          ]),
+          h(
+            "tbody",
+            loading.value ? [
+              h("tr", [
+                h("td", { colspan: 5, style: s.empty }, "\u52A0\u8F7D\u4E2D\u2026")
+              ])
+            ] : records.value.length === 0 ? [
+              h("tr", [
+                h("td", { colspan: 5, style: s.empty }, "\u6682\u65E0\u6570\u636E")
+              ])
+            ] : records.value.map(
+              (row) => h("tr", { key: row.resourceId }, [
+                h("td", { style: s.td }, row.name),
+                h("td", { style: s.td }, [
+                  h("code", { style: s.code }, row.identification)
+                ]),
+                h("td", { style: s.td }, row.description || "\u2014"),
+                h("td", { style: s.td }, [
+                  h(
+                    "span",
+                    {
+                      style: {
+                        ...s.badge,
+                        background: row.status === RESOURCE_STATUS_ENABLED ? "#e8f7ef" : "#f4f4f5",
+                        color: row.status === RESOURCE_STATUS_ENABLED ? "#067647" : "#667085"
+                      }
+                    },
+                    statusLabel[row.status] ?? String(row.status)
+                  )
+                ]),
+                h("td", { style: s.td }, [
+                  h(
+                    "button",
+                    {
+                      type: "button",
+                      style: s.linkBtn,
+                      onClick: () => openEdit(row)
+                    },
+                    "\u7F16\u8F91"
+                  ),
+                  h(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...s.linkBtn, color: "#d92d20" },
+                      onClick: () => void handleDelete(row)
+                    },
+                    "\u5220\u9664"
+                  )
+                ])
+              ])
+            )
+          )
+        ])
+      ]),
+      h("div", { style: s.pagination }, [
+        h("label", { style: s.pageSize }, [
+          "\u6BCF\u9875",
+          h(
+            "select",
+            {
+              style: s.select,
+              value: pageSize.value,
+              onChange: (e) => {
+                pageSize.value = e.target.value;
+              }
+            },
+            PAGE_SIZE_OPTIONS.map(
+              (size) => h("option", { key: size, value: size }, size)
+            )
+          )
+        ]),
+        h("div", { style: s.pageBtns }, [
+          h(
+            "button",
+            {
+              type: "button",
+              style: s.secondaryBtn,
+              disabled: !hasPreviousPage.value || loading.value,
+              onClick: () => void loadList("previous")
+            },
+            "\u4E0A\u4E00\u9875"
+          ),
+          h(
+            "button",
+            {
+              type: "button",
+              style: s.secondaryBtn,
+              disabled: !hasNextPage.value || loading.value,
+              onClick: () => void loadList("next")
+            },
+            "\u4E0B\u4E00\u9875"
+          )
+        ])
+      ]),
+      dialogOpen.value ? h(
+        "div",
+        { style: s.mask, onClick: closeDialog },
+        [
+          h(
+            "div",
+            {
+              style: s.dialog,
+              role: "dialog",
+              "aria-modal": "true",
+              onClick: (e) => e.stopPropagation()
+            },
+            [
+              h("div", { style: s.dialogHeader }, [
+                h(
+                  "h3",
+                  { style: s.dialogTitle },
+                  editing.value ? "\u7F16\u8F91\u6743\u9650\u70B9" : "\u65B0\u589E\u6743\u9650\u70B9"
+                ),
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    style: s.iconBtn,
+                    "aria-label": "\u5173\u95ED",
+                    onClick: closeDialog
+                  },
+                  "\xD7"
+                )
+              ]),
+              h(
+                "form",
+                {
+                  style: s.form,
+                  onSubmit: (e) => void handleSubmit(e)
+                },
+                [
+                  h("label", { style: s.field }, [
+                    h("span", { style: s.label }, "\u6743\u9650\u540D\u79F0"),
+                    h("input", {
+                      style: s.input,
+                      value: form.name,
+                      placeholder: "\u8BF7\u8F93\u5165\u6743\u9650\u540D\u79F0",
+                      required: true,
+                      onInput: (e) => {
+                        form.name = e.target.value;
+                      }
+                    })
+                  ]),
+                  h("label", { style: s.field }, [
+                    h("span", { style: s.label }, "\u63A5\u53E3\u6807\u8BC6"),
+                    h("input", {
+                      style: s.input,
+                      value: form.identification,
+                      placeholder: "\u5982 user:list",
+                      required: true,
+                      onInput: (e) => {
+                        form.identification = e.target.value;
+                      }
+                    })
+                  ]),
+                  h("label", { style: s.field }, [
+                    h("span", { style: s.label }, "\u72B6\u6001"),
+                    h(
+                      "select",
+                      {
+                        style: s.input,
+                        value: form.status,
+                        onChange: (e) => {
+                          form.status = Number(
+                            e.target.value
+                          );
+                        }
+                      },
+                      RESOURCE_STATUS_OPTIONS.map(
+                        (opt) => h("option", { key: opt.value, value: opt.value }, opt.label)
+                      )
+                    )
+                  ]),
+                  h("label", { style: s.field }, [
+                    h("span", { style: s.label }, "\u79C1\u6709\u8D44\u6E90"),
+                    h(
+                      "select",
+                      {
+                        style: s.input,
+                        value: form.private ? "1" : "0",
+                        onChange: (e) => {
+                          form.private = e.target.value === "1";
+                        }
+                      },
+                      RESOURCE_PRIVATE_OPTIONS.map(
+                        (opt) => h(
+                          "option",
+                          {
+                            key: String(opt.value),
+                            value: opt.value ? "1" : "0"
+                          },
+                          opt.label
+                        )
+                      )
+                    )
+                  ]),
+                  h("label", { style: s.field }, [
+                    h("span", { style: s.label }, "\u63CF\u8FF0"),
+                    h("textarea", {
+                      style: {
+                        ...s.input,
+                        minHeight: "88px",
+                        resize: "vertical"
+                      },
+                      value: form.description,
+                      placeholder: "\u8BF7\u8F93\u5165\u63CF\u8FF0",
+                      onInput: (e) => {
+                        form.description = e.target.value;
+                      }
+                    })
+                  ]),
+                  h("div", { style: s.dialogFooter }, [
+                    h(
+                      "button",
+                      {
+                        type: "button",
+                        style: s.secondaryBtn,
+                        onClick: closeDialog
+                      },
+                      "\u53D6\u6D88"
+                    ),
+                    h(
+                      "button",
+                      {
+                        type: "submit",
+                        style: s.primaryBtn,
+                        disabled: saving.value
+                      },
+                      saving.value ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58"
+                    )
+                  ])
+                ]
+              )
+            ]
+          )
+        ]
+      ) : null
+    ]);
+  }
+});
+
 // src/vue/index.ts
 import { PermissionStore, createPermissionStore as createPermissionStore2 } from "../core";
+import { getAppClientId, getDeviceWorkerId, snowyflake } from "../utils/snowflake";
+import {
+  RESOURCE_PRIVATE_OPTIONS as RESOURCE_PRIVATE_OPTIONS2,
+  RESOURCE_STATUS_DISABLED,
+  RESOURCE_STATUS_ENABLED as RESOURCE_STATUS_ENABLED2,
+  RESOURCE_STATUS_OPTIONS as RESOURCE_STATUS_OPTIONS2,
+  RESOURCE_TYPE_API,
+  appendQueryParam,
+  buildCreateBody,
+  buildUpdateBody,
+  createAuthorizationResourceApi,
+  createDefaultResourceRequest,
+  extractPagination,
+  extractRecords,
+  mapAuthorizationResource
+} from "../resources";
 export {
   Can,
   PERMISSION_STORE_KEY,
   PermissionStore,
+  RESOURCE_PRIVATE_OPTIONS2 as RESOURCE_PRIVATE_OPTIONS,
+  RESOURCE_STATUS_DISABLED,
+  RESOURCE_STATUS_ENABLED2 as RESOURCE_STATUS_ENABLED,
+  RESOURCE_STATUS_OPTIONS2 as RESOURCE_STATUS_OPTIONS,
+  RESOURCE_TYPE_API,
+  ResourceManager,
+  appendQueryParam,
+  buildCreateBody,
+  buildUpdateBody,
+  createAuthorizationResourceApi,
+  createDefaultResourceRequest,
   createPermissionPlugin,
   createPermissionStore2 as createPermissionStore,
   createVPermission,
+  extractPagination,
+  extractRecords,
+  getAppClientId,
+  getDeviceWorkerId,
+  mapAuthorizationResource,
+  snowyflake,
   useHasPermission,
   useHasRole,
   usePermission