rewrite components with Svelte

plugins/invitation-codes/assets/CodeField.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte'
+
+  let code = ''
+
+  let off: () => void
+  onMount(() => {
+    off = globalThis.blessing.event.on(
+      'beforeFetch',
+      (request: { data: Record<string, string> }) => {
+        request.data.invitationCode = code
+      },
+    )
+  })
+  onDestroy(() => off())
+</script>
+
+<input
+  type="text"
+  class="form-control"
+  placeholder={globalThis.blessing.t('invitation-codes.placeholder')}
+  required
+  bind:value={code}
+/>
+<div class="input-group-append">
+  <div class="input-group-text">
+    <i class="fas fa-receipt" />
+  </div>
+</div>

plugins/invitation-codes/assets/register.ts

@@ -0,0 +1,11 @@
+import CodeField from './CodeField.svelte'
+
+globalThis.blessing.event.on('mounted', () => {
+  const div = document.createElement('div')
+  div.className = 'input-group mb-3'
+  new CodeField({ target: div })
+
+  setTimeout(() => {
+    document.querySelector('.input-group:nth-child(4)')?.after(div)
+  }, 0)
+})

plugins/share-registration-link/assets/RegistrationLinksList.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  type CodeRecord = {
+    id: number
+    sharer: number
+    code: string
+    url: string
+  }
+
+  let records: CodeRecord[] = []
+  let sharer = 0
+  let sharee = 0
+
+  onMount(async () => {
+    ;({ records, sharer, sharee } = await globalThis.blessing.fetch.get(
+      '/user/reg-links',
+    ))
+  })
+
+  async function handleDeleteClick({ id }: CodeRecord) {
+    await globalThis.blessing.fetch.del(`/user/reg-links/${id}`)
+    records = records.filter((record) => record.id !== id)
+  }
+
+  async function handleGenerateClick() {
+    const {
+      data: { record },
+    }: { data: { record: CodeRecord } } = await globalThis.blessing.fetch.post(
+      '/user/reg-links',
+    )
+    records = [...records, record]
+  }
+</script>
+
+<div class="card card-primary card-outline">
+  <div class="card-header">
+    <h3 class="card-title">分享注册链接</h3>
+  </div>
+  <div class="card-body">
+    <p>
+      分享注册链接，当新用户使用此链接时，您将获得 {sharer} 积分。 同时新用户可获得
+      {sharee} 积分。
+    </p>
+    {#if records.length > 0}
+      <p>可用的链接：</p>
+      <ul class="break-word">
+        {#each records as record (record.id)}
+          <li>
+            <span class="mr-1">{record.url}</span>
+            <button
+              class="btn btn-danger"
+              on:click={() => handleDeleteClick(record)}
+            >
+              删除
+            </button>
+          </li>
+        {/each}
+      </ul>
+    {:else}
+      还没有已生成的链接。
+    {/if}
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-primary" on:click={handleGenerateClick}>
+      生成新链接
+    </button>
+  </div>
+</div>
+
+<style>
+  .break-word {
+    word-wrap: break-word;
+  }
+</style>

plugins/share-registration-link/assets/generate.ts

@@ -0,0 +1,5 @@
+import RegistrationLinksList from './RegistrationLinksList.svelte'
+
+new RegistrationLinksList({
+  target: document.querySelector('#registration-links')!,
+})

plugins/single-player-limit/assets/BindPlayer.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  const { base_url, fetch, notify, t } = globalThis.blessing
+
+  type Player = {
+    pid: number
+    name: string
+    uid: number
+    tid_skin: number
+    tid_cape: number
+    last_modified: string
+  }
+
+  let isLoading = false
+  let isSubmitting = false
+
+  let players: string[] = []
+  let selected = ''
+
+  onMount(async () => {
+    isLoading = true
+    try {
+      const data = await fetch.get<Player[]>('/user/player/list')
+      players = data.map(({ name }) => name)
+      selected = players[0]
+    } finally {
+      isLoading = false
+    }
+  })
+
+  async function handleSubmit() {
+    isSubmitting = true
+    try {
+      const {
+        code,
+        message,
+      }: {
+        code: number
+        message: string
+      } = await fetch.post('/user/player/bind', {
+        player: selected,
+      })
+      if (code === 0) {
+        await notify.showModal({
+          mode: 'alert',
+          text: message,
+        })
+        location.assign(`${base_url}/user`)
+      } else {
+        notify.showModal({ mode: 'alert', text: message })
+      }
+    } finally {
+      isSubmitting = false
+    }
+  }
+</script>
+
+{#if isLoading}
+  <p>Loading...</p>
+{:else}
+  <form method="post" on:submit|preventDefault={handleSubmit}>
+    {#if players.length > 0}
+      <p>{t('single-player-limit.bindExistedPlayer')}</p>
+      <div class="mb-3">
+        {#each players as player (player)}
+          <label class="d-block mb-1">
+            <input
+              type="radio"
+              class="mr-2"
+              checked={selected === player}
+              on:change={() => (selected = player)}
+            />
+            {player}
+          </label>
+        {/each}
+      </div>
+    {:else}
+      <p>{t('single-player-limit.bindNewPlayer')}</p>
+      <input
+        type="text"
+        class="form-control mb-3"
+        placeholder={t('general.player.player-name')}
+        on:change={(e) => (selected = e.currentTarget.value)}
+      />
+    {/if}
+    <button
+      class="btn btn-primary float-right"
+      type="submit"
+      disabled={isSubmitting}
+    >
+      {#if isSubmitting}
+        <i class="fas fa-spinner fa-spin mr-1" />
+        {t('general.wait')}
+      {:else}
+        {t('general.submit')}
+      {/if}
+    </button>
+  </form>
+{/if}