📝 docs: 资源商店新增发布资源功能

docs/components/PluginStore.vue

@@ -57,6 +57,11 @@ fetch('https://registry.nonebot.dev/plugins.json')
       <ToggleSwitch v-model:modelValue="showLiteyukiPluginOnly"/>
       {{ getTextRef('liteyukiOnly') }}
     </div>
+
+<!--    按钮们-->
+<!--    <div class="tab">-->
+<!--        <button @click="open"-->
+<!--    </div>-->
     <div class="items">
       <!-- 使用filteredItems来布局商品 -->
       <ItemCard v-for="item in filteredItems" :key="item.id" :item="item"/>

docs/components/ResPubWindow.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-if="isVisible" class="floating-window">
+    <div class="window-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {defineProps} from 'vue'
+
+const props = defineProps({
+  isVisible: Boolean,
+})
+</script>
+
+<style scoped>
+.floating-window {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.window-content {
+  background: var(--vp-c-gray-1);
+  padding: 20px;
+  border-radius: 5px;
+  max-width: 60%;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+</style>

docs/components/ResStore.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import ItemCard from './ResItemCard.vue'
-import * as url from "node:url";
+import ResPubWindow from "./ResPubWindow.vue";
 import {getTextRef} from "./scripts/i18n";
+import {RepoUrl} from "./scripts/statsApi";
 
 // 从public/assets/resources.json加载插件
 let filteredItems = computed(() => {
@@ -19,23 +20,80 @@ let filteredItems = computed(() => {
 let items = ref([])
 let search = ref('')
 fetch("/resources.json")
-  .then(response => response.json())
-  .then(data => {
-    items.value = data
-  })
-  .catch(error => console.error(error))
+    .then(response => response.json())
+    .then(data => {
+      items.value = data
+    })
+    .catch(error => console.error(error))
 // 列表倒序
 
+const isPublishWindowOpen = ref(false)
+
+let newRes = ref({
+  name: '',
+  desc: '',
+  author: '',
+  homepage: '',
+  link: '',
+})
+
+function openPublishWindow() {
+  isPublishWindowOpen.value = true
+}
+
+function closePublishWindow() {
+  isPublishWindowOpen.value = false
+}
+
+const submitForm = () => {
+  const title = encodeURI(`Resource: ${newRes.value.name}`)
+  const body = encodeURI(
+      JSON.stringify(
+          {
+            name: newRes.value.name,
+            desc: newRes.value.desc,
+            author: newRes.value.author,
+            homepage: newRes.value.homepage,
+            link: newRes.value.link,
+          }
+      )
+  )
+  const issueURL = `${RepoUrl}/issues/new?labels=Resource&title=${title}&body=${body}`
+  window.open(issueURL, '_blank')
+}
+
 </script>
 
 <template>
   <div class="market">
     <h1>{{ getTextRef('resourceStore') }}</h1>
-    <div class="search-box-div"><input class="item-search-box" type="text" :placeholder="getTextRef('search')" v-model="search" /></div>
+    <div class="search-box-div"><input class="item-search-box" type="text" :placeholder="getTextRef('search')" v-model="search"/></div>
+    <div class="store-tabs" style="display: flex">
+      <button class="store-button publish-button" @click="openPublishWindow">{{ getTextRef('publishRes') }}</button>
+    </div>
     <div class="items">
       <!-- 使用filteredItems来布局商品 -->
       <ItemCard v-for="item in filteredItems" :key="item.id" :item="item"/>
     </div>
+    <ResPubWindow class="pub-window" :is-visible="isPublishWindowOpen">
+      <h2>{{ getTextRef("publishRes") }}</h2>
+      <form @submit.prevent="submitForm">
+        <label for="name">{{ getTextRef("resName") }}</label>
+        <input type="text" id="name" v-model="newRes.name" :placeholder="getTextRef('resNameText')"/>
+        <label for="desc">{{ getTextRef("resDesc") }}</label>
+        <input type="text" id="desc" v-model="newRes.desc" :placeholder="getTextRef('resDescText')"/>
+        <label for="author">{{ getTextRef("resAuthor") }}</label>
+        <input type="text" id="author" v-model="newRes.author" :placeholder="getTextRef('resAuthorText')"/>
+        <label for="link">{{ getTextRef("resLink") }}</label>
+        <input type="text" id="link" v-model="newRes.link" :placeholder="getTextRef('resLinkText')"/>
+        <label for="homepage">{{ getTextRef("resHomepage") }}</label>
+        <input type="text" id="homepage" v-model="newRes.homepage" :placeholder="getTextRef('resHomepageText')"/>
+        <div class="pub-options" style="display: flex; justify-content: center">
+          <button class="pub-option close" type="button" @click="closePublishWindow">{{ getTextRef("closeButtonText") }}</button>
+          <button class="pub-option submit" type="submit">{{ getTextRef("submitButtonText") }}</button>
+        </div>
+      </form>
+    </ResPubWindow>
   </div>
 </template>
 
@@ -51,4 +109,6 @@ h1 {
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 10px;
 }
+
+
 </style>

docs/components/scripts/i18n.ts

@@ -24,6 +24,23 @@ const i18nData = {
         resourceStore: 'Resources Store',
         thx_contributors: 'Thanks the following contributors!',
         easterEgg: 'Congratulations on finding the Easter egg!',
+
+        publishPlugin: 'Publish Plugin',
+        publishRes: 'Publish Resource',
+        closeButtonText: 'Close',
+        submitButtonText: 'Submit',
+
+        resName: 'Name',
+        resDesc: 'Description',
+        resAuthor: 'Author',
+        resLink: 'Download Link',
+        resHomepage: 'Homepage',
+
+        resNameText: 'Example: Kawaii Style Theme',
+        resDescText: 'Example: A kawaii style and color theme',
+        resAuthorText: 'Usually the github username, Example: yanyongyu',
+        resLinkText: 'Direct download link, usually zip package link',
+        resHomepageText: 'Optional, can be the name of the git platform repository"',
     },
     zh: {
         stats: '统计信息',
@@ -47,6 +64,23 @@ const i18nData = {
         resourceStore: '资源商店',
         thx_contributors: '感谢以下贡献者！',
         easterEgg: '恭喜你发现了彩蛋！',
+
+        publishPlugin: '发布插件',
+        publishRes: '发布资源',
+        closeButtonText: '关闭',
+        submitButtonText: '提交',
+
+        resName: '名称',
+        resDesc: '描述',
+        resAuthor: '作者',
+        resLink: '下载链接',
+        resHomepage: '主页',
+
+        resNameText: '示例：可爱风格主题',
+        resDescText: '示例：一个可爱风格和配色的主题',
+        resAuthorText: '通常为github用户名，示例：yanyongyu',
+        resLinkText: '直接下载链接，通常为zip包链接',
+        resHomepageText: '可选，可为git平台仓库名',
     }
 }
 
@@ -74,5 +108,5 @@ export function updateRefData() {
 export function getTextRef(key: string): any {
     const lang = formatLang(useData().site.value.lang);
     refData[key] = getText(lang, key);
-    return refData[key]
+    return refData[key] || key;
 }