use openapi-fetch

cspell.json

@@ -3,16 +3,17 @@
   "version": "0.2",
   "ignorePaths": [
     "node_modules",
-    "dist",
+    "dist"
   ],
   "words": [
     "astro",
     "astrojs",
     "frontmatter",
-    "NBTCA",
     "m_lfit",
     "N3ptune",
+    "NBTCA",
+    "openapi",
     "rehypePlugins",
     "tseslint"
   ]
-}
+}

package.json

@@ -9,7 +9,8 @@
     "preview": "astro preview",
     "lint": "eslint",
     "astro": "astro",
-    "prepare": "husky"
+    "prepare": "husky",
+    "gen-type": "openapi-typescript http://localhost:4000/openapi-3.0.json -o ./src/types/saturday.d.ts"
   },
   "dependencies": {
     "@astrojs/react": "^3.3.1",
@@ -28,6 +29,7 @@
     "jsonwebtoken": "^9.0.2",
     "md5": "^2.3.0",
     "npm": "^10.8.1",
+    "openapi-fetch": "^0.10.2",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -52,10 +54,11 @@
     "globals": "^15.2.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "typescript": "^5.4.5",
+    "openapi-typescript": "^7.0.1",
+    "typescript": "^5.5.3",
     "typescript-eslint": "^7.9.0"
   },
   "lint-staged": {
     "*.{js,jsx,mjs,ts,tsx,mts,astro}": "eslint --fix"
   }
-}
+}

src/pages/about.astro

@@ -2,13 +2,10 @@
 import BaseLayout from "../layouts/BaseLayout.astro"
 import { computed } from "vue"
 import MemberCard from "../components/MemberCard.astro"
-import { type Member } from "../store/member.ts"
+import type { PublicMember } from "../store/member.ts"
+import { saturdayClient } from "../utils/client"
 
-const members: Member[] = await fetch(
+const { data: members } = await saturdayClient.GET("/members", { params: {} })
-  "https://api.nbtca.space/v2/members",
-).then((res) => {
-  return res.json()
-})
 
 // memberId is like "3232323233", the second and third number is the year of the member
 const memberGroupByYear = computed(() => {
@@ -27,9 +24,8 @@ const memberGroupByYear = computed(() => {
         acc[year].push(cur)
         return acc
       },
-      {} as Record<string, Member[]>,
+      {} as Record<string, PublicMember[]>,
     )
-  // group["其他成员以及往届成员"] = otherMembers
   return group
 });
 ---
@@ -44,21 +40,21 @@ const memberGroupByYear = computed(() => {
         </div>
         <div>
           {
-          Object.keys(memberGroupByYear.value)
+            Object.keys(memberGroupByYear.value)
-            .sort((a, b) => parseInt(b) - parseInt(a))
+              .sort((a, b) => parseInt(b) - parseInt(a))
-            .map((year) => {
+              .map((year) => {
-              return (
+                return (
-                <div class="py-4 first:pt-2">
+                  <div class="py-4 first:pt-2">
-                  <div class="text-lg lg:text-2xl font-bold pb-2">{year}</div>
+                    <div class="text-lg lg:text-2xl font-bold pb-2">{year}</div>
-                  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-8">
+                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-8">
-                    {memberGroupByYear.value[year].map(member => (
+                      {memberGroupByYear.value[year].map(member => (
-                      <MemberCard member={member} />
+                        <MemberCard member={member} />
-                    ))}
+                      ))}
+                    </div>
                   </div>
-                </div>
+                )
-              )
+              })
-            })
+          }
-        }
         </div>
       </div>
     </section>

src/store/member.ts

@@ -1,12 +1,14 @@
-export interface Member {
+import type { components } from "../types/saturday"
-  memberId?: string
-  alias: string
-  avatar: Promise<typeof import("*.jpg")> | string
-  profile: string
-  link?: string
-}
 
-export const otherMembers: (Member & { year?: number })[] = [
+export type PublicMember = components["schemas"]["PublicMember"]
+
+export const otherMembers: (
+  Partial<Omit<PublicMember, "avatar">>
+  & {
+    year?: number
+    avatar: Promise<typeof import("*.jpg")>
+    link: string
+  })[] = [
   {
     alias: "cimoc",
     profile: "Java, Web。",

src/types/saturday.d.ts

@@ -0,0 +1,688 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+export interface paths {
+  "/events": {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /** Get a public event by page */
+    get: operations["get-public-event-by-page"]
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+  "/events/{EventId}": {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /** Get a public event by id */
+    get: operations["get-public-event-by-id"]
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+  "/member/token/logto": {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /** Create token via logto token */
+    get: operations["create-token-via-logto-token"]
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+  "/members": {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /** Get a public member by page */
+    get: operations["get-public-member-by-page"]
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+  "/members/{MemberId}": {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /** Get a public member by id */
+    get: operations["get-public-member"]
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+  "/members/{MemberId}/logto_id": {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    get?: never
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    /** Bind member logto id */
+    patch: operations["bind-member-logto-id"]
+    trace?: never
+  }
+  "/members/{MemberId}/token": {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    get?: never
+    put?: never
+    /** Create token */
+    post: operations["create-token"]
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+  "/ping": {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /** Ping */
+    get: operations["ping"]
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+  "clients/token/wechat": {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    get?: never
+    put?: never
+    /** Create token via wechat */
+    post: operations["create-token-via-wechat"]
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+}
+export type webhooks = Record<string, never>
+export interface components {
+  schemas: {
+    "Bind-member-logto-idRequest": {
+      /**
+             * Format: uri
+             * @description A URL to the JSON Schema for this object.
+             * @example https://example.com/schemas/Bind-member-logto-idRequest.json
+             */
+      readonly $schema?: string
+      password: string
+    }
+    "ClientTokenResponse": {
+      /**
+             * Format: uri
+             * @description A URL to the JSON Schema for this object.
+             * @example https://example.com/schemas/ClientTokenResponse.json
+             */
+      readonly $schema?: string
+      /** Format: int64 */
+      clientId: number
+      gmtCreate: string
+      gmtModified: string
+      openid: string
+      token: string
+    }
+    "Create-token-via-wechatRequest": {
+      /**
+             * Format: uri
+             * @description A URL to the JSON Schema for this object.
+             * @example https://example.com/schemas/Create-token-via-wechatRequest.json
+             */
+      readonly $schema?: string
+      code: string
+    }
+    "Create-tokenRequest": {
+      /**
+             * Format: uri
+             * @description A URL to the JSON Schema for this object.
+             * @example https://example.com/schemas/Create-tokenRequest.json
+             */
+      readonly $schema?: string
+      password: string
+    }
+    "CreateMemberTokenResponse": {
+      /**
+             * Format: uri
+             * @description A URL to the JSON Schema for this object.
+             * @example https://example.com/schemas/CreateMemberTokenResponse.json
+             */
+      readonly $schema?: string
+      alias: string
+      avatar: string
+      createdBy: string
+      gmtCreate: string
+      gmtModified: string
+      logtoId: string
+      memberId: string
+      name: string
+      phone: string
+      profile: string
+      qq: string
+      role: string
+      section: string
+      token: string
+    }
+    "ErrorDetail": {
+      /** @description Where the error occurred, e.g. 'body.items[3].tags' or 'path.thing-id' */
+      location?: string
+      /** @description Error message text */
+      message?: string
+      /** @description The value at the given location */
+      value?: unknown
+    }
+    "ErrorModel": {
+      /**
+             * Format: uri
+             * @description A URL to the JSON Schema for this object.
+             * @example https://example.com/schemas/ErrorModel.json
+             */
+      readonly $schema?: string
+      /**
+             * @description A human-readable explanation specific to this occurrence of the problem.
+             * @example Property foo is required but is missing.
+             */
+      detail?: string
+      /** @description Optional list of individual error details */
+      errors?: components["schemas"]["ErrorDetail"][]
+      /**
+             * Format: uri
+             * @description A URI reference that identifies the specific occurrence of the problem.
+             * @example https://example.com/error-log/abc123
+             */
+      instance?: string
+      /**
+             * Format: int64
+             * @description HTTP status code
+             * @example 400
+             */
+      status?: number
+      /**
+             * @description A short, human-readable summary of the problem type. This value should not change between occurrences of the error.
+             * @example Bad Request
+             */
+      title?: string
+      /**
+             * Format: uri
+             * @description A URI reference to human-readable documentation for the error.
+             * @default about:blank
+             * @example https://example.com/errors/example
+             */
+      type: string
+    }
+    "EventLog": {
+      action: string
+      description: string
+      gmtCreate: string
+      /** Format: int64 */
+      logId: number
+      memberId: string
+    }
+    "Member": {
+      /**
+             * Format: uri
+             * @description A URL to the JSON Schema for this object.
+             * @example https://example.com/schemas/Member.json
+             */
+      readonly $schema?: string
+      alias: string
+      avatar: string
+      createdBy: string
+      gmtCreate: string
+      gmtModified: string
+      logtoId: string
+      memberId: string
+      name: string
+      phone: string
+      profile: string
+      qq: string
+      role: string
+      section: string
+    }
+    "PingResponse": {
+      /**
+             * Format: uri
+             * @description A URL to the JSON Schema for this object.
+             * @example https://example.com/schemas/PingResponse.json
+             */
+      readonly $schema?: string
+      /**
+             * @description Ping message
+             * @example ping
+             */
+      message: string
+    }
+    "PublicEvent": {
+      /**
+             * Format: uri
+             * @description A URL to the JSON Schema for this object.
+             * @example https://example.com/schemas/PublicEvent.json
+             */
+      readonly $schema?: string
+      /** Format: int64 */
+      clientId: number
+      closedBy: components["schemas"]["PublicMember"]
+      /** Format: int64 */
+      eventId: number
+      gmtCreate: string
+      gmtModified: string
+      logs: components["schemas"]["EventLog"][]
+      member: components["schemas"]["PublicMember"]
+      model: string
+      problem: string
+      status: string
+    }
+    "PublicMember": {
+      /**
+             * Format: uri
+             * @description A URL to the JSON Schema for this object.
+             * @example https://example.com/schemas/PublicMember.json
+             */
+      readonly $schema?: string
+      alias: string
+      avatar: string
+      createdBy: string
+      gmtCreate: string
+      gmtModified: string
+      memberId: string
+      profile: string
+      role: string
+    }
+  }
+  responses: never
+  parameters: never
+  requestBodies: never
+  headers: never
+  pathItems: never
+}
+export type $defs = Record<string, never>
+export interface operations {
+  "get-public-event-by-page": {
+    parameters: {
+      query?: {
+        /**
+                 * @description Offset
+                 * @example 0
+                 */
+        offset?: number
+        /**
+                 * @description Limit
+                 * @example 50
+                 */
+        limit?: number
+        status?: string
+        order?: string
+      }
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/json": components["schemas"]["PublicEvent"][]
+        }
+      }
+      /** @description Error */
+      default: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/problem+json": components["schemas"]["ErrorModel"]
+        }
+      }
+    }
+  }
+  "get-public-event-by-id": {
+    parameters: {
+      query?: never
+      header?: never
+      path: {
+        EventId: number
+      }
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/json": components["schemas"]["PublicEvent"]
+        }
+      }
+      /** @description Error */
+      default: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/problem+json": components["schemas"]["ErrorModel"]
+        }
+      }
+    }
+  }
+  "create-token-via-logto-token": {
+    parameters: {
+      query?: never
+      header?: {
+        Authorization?: string
+      }
+      path: {
+        /**
+                 * @description Member Id
+                 * @example 2333333333
+                 */
+        MemberId: string
+      }
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/json": components["schemas"]["CreateMemberTokenResponse"]
+        }
+      }
+      /** @description Error */
+      default: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/problem+json": components["schemas"]["ErrorModel"]
+        }
+      }
+    }
+  }
+  "get-public-member-by-page": {
+    parameters: {
+      query?: {
+        /**
+                 * @description Offset
+                 * @example 0
+                 */
+        offset?: number
+        /**
+                 * @description Limit
+                 * @example 50
+                 */
+        limit?: number
+      }
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/json": components["schemas"]["PublicMember"][]
+        }
+      }
+      /** @description Error */
+      default: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/problem+json": components["schemas"]["ErrorModel"]
+        }
+      }
+    }
+  }
+  "get-public-member": {
+    parameters: {
+      query?: never
+      header?: never
+      path: {
+        /**
+                 * @description Name to greet
+                 * @example 2333333333
+                 */
+        MemberId: string
+      }
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/json": components["schemas"]["PublicMember"]
+        }
+      }
+      /** @description Error */
+      default: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/problem+json": components["schemas"]["ErrorModel"]
+        }
+      }
+    }
+  }
+  "bind-member-logto-id": {
+    parameters: {
+      query?: never
+      header?: {
+        Authorization?: string
+      }
+      path: {
+        /**
+                 * @description Member Id
+                 * @example 2333333333
+                 */
+        MemberId: string
+      }
+      cookie?: never
+    }
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["Bind-member-logto-idRequest"]
+      }
+    }
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/json": components["schemas"]["Member"]
+        }
+      }
+      /** @description Error */
+      default: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/problem+json": components["schemas"]["ErrorModel"]
+        }
+      }
+    }
+  }
+  "create-token": {
+    parameters: {
+      query?: never
+      header?: never
+      path: {
+        /**
+                 * @description Member Id
+                 * @example 2333333333
+                 */
+        MemberId: string
+      }
+      cookie?: never
+    }
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["Create-tokenRequest"]
+      }
+    }
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/json": components["schemas"]["CreateMemberTokenResponse"]
+        }
+      }
+      /** @description Error */
+      default: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/problem+json": components["schemas"]["ErrorModel"]
+        }
+      }
+    }
+  }
+  "ping": {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/json": components["schemas"]["PingResponse"]
+        }
+      }
+      /** @description Error */
+      default: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/problem+json": components["schemas"]["ErrorModel"]
+        }
+      }
+    }
+  }
+  "create-token-via-wechat": {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["Create-token-via-wechatRequest"]
+      }
+    }
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/json": components["schemas"]["ClientTokenResponse"]
+        }
+      }
+      /** @description Error */
+      default: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          "application/problem+json": components["schemas"]["ErrorModel"]
+        }
+      }
+    }
+  }
+}

src/utils/client.ts

@@ -0,0 +1,6 @@
+import createClient from "openapi-fetch"
+import type { paths } from "../types/saturday"
+
+export const saturdayClient = createClient<paths>({
+  baseUrl: "https://api.nbtca.space/v2/",
+})