Merge pull request #83 from UIGF-org/82-导入导出支持badge分离

Author: Lightczx

README.md

@@ -34,9 +34,16 @@
       repo=""
       site=""
       title=""
-      desc="">
-      <Pcb label="UIGF vx.x" :games="['ys', 'sr', 'zzz_']" bg=""></Pcb>
-      <Pcb bg="">Text</Pcb>
+      desc=""
+      import export>
+      <template #import>
+        <Pcb label="UIGF vx.x" :games="['ys', 'sr', 'zzz_']" bg=""></Pcb>
+        <Pcb bg="">Text</Pcb>
+      </template>
+      <template #export>
+        <Pcb label="UIGF vx.x" :games="['ys', 'sr', 'zzz_']" bg=""></Pcb>
+        <Pcb bg="">Text</Pcb>
+      </template>
     </Pcd>
    ```
 
@@ -52,6 +59,32 @@
        - 项目支持 UIGF v2.2，应填写 `label="UIGF v2.2" :games="['ys']"`
        - 若有追加说明，可使用 `<Pcb>Text</Pcb>` 标签，其中 `Text` 为你的说明文字
      - **`bg`**: 可选字段，你的说明文字的背景颜色，可选值为 `red`, `blue`, `green`, `yellow`, `purple`,`white`
+     - **`import`**、**`export`**：**必填填写字段**，对项目导入和导出的支持情况进行说明
+
+   - 示例代码：
+
+     ```html
+     <!-- 项目支持UIGFv2.4~4.0的导入，但仅支持UIGF3.0 4.0的导出 -->
+     <Pcd
+       bg="/partnerships/TeyvatGuide/AppPreview.png"
+       icon="/partnerships/TeyvatGuide/logo.png"
+       repo="https://github.com/BTMuli/TeyvatGuide"
+       site="https://apps.microsoft.com/detail/9NLBNNNBNSJN"
+       title="提瓦特指南"
+       desc="Game Tool for Genshin Impact Player"
+       import export>
+       <template #import>
+         <Pcb label="UIGF v4.0" :games="['ys', 'sr_', 'zzz_']" bg="orange"></Pcb>
+         <Pcb label="UIGF v3.0" :games="['ys']" bg="white"></Pcb>
+         <Pcb label="UIGF v2.4" :games="['ys']" bg="white"></Pcb>
+         <Pcb label="UIGF v2.3" :games="['ys']" bg="white"></Pcb>
+       </template>
+       <template #export>
+         <Pcb label="UIGF v4.0" :games="['ys', 'sr_', 'zzz_']" bg="orange"></Pcb>
+         <Pcb label="UIGF v3.0" :games="['ys']" bg="white"></Pcb>
+       </template>
+     </Pcd>
+     ```
 
    - 若您的项目
       - 支持 UIGF v4.0或以上版本

docs/.vuepress/components/ProjCardDev.vue

@@ -11,18 +11,32 @@
       <div class="proj-card-main">
         <img :src="props.icon" alt="icon" />
         <div class="proj-card-info">
-          <div class="proj-card-title" :title="props.title">{{ props.title }}</div>
+          <div class="proj-card-title" :title="props.title" @click="toProj()">
+            {{ props.title }}
+          </div>
           <div class="proj-card-desc" :title="props.desc">{{ props.desc }}</div>
         </div>
       </div>
-      <div class="proj-card-badges">
+      <div v-if="props.import" class="proj-card-badge-box">
+        <div class="proj-card-badge-title">{{ getImportTitle() }}</div>
+        <div class="proj-card-badges">
+          <slot name="import"></slot>
+        </div>
+      </div>
+      <div v-if="props.export" class="proj-card-badge-box">
+        <div class="proj-card-badge-title">{{ getExportTitle() }}</div>
+        <div class="proj-card-badges">
+          <slot name="export"></slot>
+        </div>
+      </div>
+      <div class="proj-card-badges" v-if="!props.export && !props.import">
         <slot></slot>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 
 interface ProjCardDevProps {
@@ -32,9 +46,25 @@ interface ProjCardDevProps {
   desc: string;
   repo?: string;
   site?: string;
+  import?: true;
+  export?: true;
 }
 
 const props = defineProps<ProjCardDevProps>();
+const lang = ref("zh-CN");
+
+onMounted(() => {
+  const path = window.location.pathname;
+  lang.value = path.startsWith("/zh/") ? "zh-CN" : "en-US";
+});
+
+function getImportTitle() {
+  return lang.value === "zh-CN" ? "导入支持：" : "Supported Import:";
+}
+
+function getExportTitle() {
+  return lang.value === "zh-CN" ? "导出支持：" : "Supported Export:";
+}
 
 function isDarkTheme(): boolean | null {
   const theme = useLocalStorage<"auto" | "dark" | "light">("vuepress-theme-hope-scheme", "auto");
@@ -62,6 +92,10 @@ function toRepo() {
 function toSite() {
   window.open(props.site, "_blank");
 }
+
+function toProj() {
+  window.open(props.site || props.repo, "_blank");
+}
 </script>
 <style lang="css" scoped>
 .proj-card-dev {
@@ -74,6 +108,7 @@ function toSite() {
   display: flex;
   flex-direction: column;
   background: v-bind(contentBg);
+  margin-bottom: 1.2em;
 }
 
 .proj-card-bg {
@@ -114,7 +149,7 @@ function toSite() {
   }
 
   i:hover {
-    color: var(--theme-color)
+    color: var(--theme-color);
   }
 }
 
@@ -154,6 +189,20 @@ function toSite() {
 .proj-card-title {
   font-size: 1.5em;
   font-weight: bold;
+  cursor: pointer;
+}
+
+.proj-card-badge-box {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.5em;
+}
+
+.proj-card-badge-title {
+  font-size: 1.2em;
+  font-weight: bold;
 }
 
 .proj-card-badges {

docs/.vuepress/components/RelativeProjectPanel.vue

@@ -2,7 +2,6 @@
 import { onMounted } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 
-
 const theme = useLocalStorage<"auto" | "dark" | "light">("vuepress-theme-hope-scheme", "auto");
 
 onMounted(() => {
@@ -12,7 +11,6 @@ onMounted(() => {
     }
   });
 });
-
 </script>
 
 <template>
@@ -23,11 +21,10 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .relative-project-panel {
-  display: grid;
+  column-count: 2;
   gap: 1.2em;
-  grid-template-columns: repeat(2, 1fr);
   @media (max-width: 768px) {
-    grid-template-columns: 1fr;
+    column-count: 1;
   }
 }
 </style>