feat: init PenguinWidget

src/entries/PenguinWidget.ts

@@ -0,0 +1,28 @@
+import 'virtual:uno.css'
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import PenguinWidget from '../widgets/PenguinWidget.vue'
+
+const ele = document.getElementById('root')
+const type = ele?.dataset.type
+const id = ele?.dataset.id
+const isAct = !!ele?.dataset.type
+const language = navigator.language.split('-')[0]
+
+if (ele) {
+  fetch('https://static.prts.wiki/20230731ua/display_config_v2.json')
+    .then((response) => {
+      if (!response.ok)
+        throw new Error('[PenguinWidget] Received non-200 response')
+
+      return response.json()
+    })
+    .then(
+      data =>
+        !navigator.userAgent.includes(data.userAgent)
+        && createApp(PenguinWidget, { type, id, isAct, language })
+          .use(createPinia())
+          .mount(ele),
+    )
+    .catch(error => console.error(error))
+}

src/widgets/PenguinWidget.vue

@@ -0,0 +1,112 @@
+<script lang="ts">
+import { NConfigProvider, NRadioButton, NRadioGroup } from 'naive-ui'
+import { storeToRefs } from 'pinia'
+import { defineComponent, ref } from 'vue'
+import { getNaiveUILocale } from '@/utils/i18n'
+import { useThemeStore } from '@/stores/theme'
+
+export default defineComponent({
+  components: { NConfigProvider, NRadioButton, NRadioGroup },
+  props: {
+    type: String,
+    id: String,
+    isAct: Boolean,
+    language: String,
+  },
+  setup() {
+    const themeStore = useThemeStore()
+    const { theme } = storeToRefs(themeStore)
+    const i18nConfig = getNaiveUILocale()
+    const isMobile = document.body.classList.contains('skin-minerva')
+
+    const servers = [
+      {
+        value: 'CN',
+        label: '国服(CN)',
+      },
+      {
+        value: 'JP',
+        label: '日服(JP)',
+      },
+      {
+        value: 'US',
+        label: '美服(US)',
+      },
+      {
+        value: 'KR',
+        label: '韩服(KR)',
+      },
+    ]
+    const stages = [
+      { value: '', label: '活动' },
+      { value: '_perm', label: '常驻' },
+      { value: '_rep', label: '复刻' },
+    ]
+
+    const selectedServer = ref(servers[0].value)
+    const selectedStage = ref(stages[0].value)
+    return {
+      theme,
+      i18nConfig,
+      isMobile,
+      selectedServer,
+      selectedStage,
+      servers,
+      stages,
+    }
+  },
+})
+</script>
+
+<template>
+  <NConfigProvider
+    :theme="theme"
+    :locale="i18nConfig.locale"
+    :date-locale="i18nConfig.dateLocale"
+  >
+    <NRadioGroup
+      v-model:value="selectedServer"
+      class="w-full mb-2"
+      name="penguin-server-option-group"
+    >
+      <NRadioButton
+        v-for="server in servers"
+        :key="server.value"
+        :value="server.value"
+        :label="server.label"
+      />
+    </NRadioGroup>
+    <NRadioGroup
+      v-if="isAct"
+      v-model:value="selectedStage"
+      class="w-full mb-1"
+      name="penguin-stage-option-group"
+    >
+      <NRadioButton
+        v-for="stage in stages"
+        :key="stage.value"
+        :value="stage.value"
+        :label="stage.label"
+      />
+    </NRadioGroup>
+    <iframe
+      class="penguin-widget"
+      :src="`https://widget.penguin-stats.cn/result/${selectedServer}/${type}/${id}${
+        isAct ? selectedStage : ''
+      }?lang=${language}`"
+      title="Penguin Statistics Widget"
+      frameborder="0"
+      loading="lazy"
+      :height="isMobile ? 800 : 600"
+      :width="isMobile ? '95%' : 1000"
+      style="
+        border: 2px solid #ccc;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
+        margin: 8px;
+      "
+    />
+  </NConfigProvider>
+</template>
+
+<style scoped></style>

templates/PenguinWidget.html

@@ -0,0 +1 @@
+<includeonly><div id="root"></div>__CSS_CONTENT__<script type="module" src="__SCRIPT_PATH__"></script></includeonly><noinclude>{{Documentation}}</noinclude>