更新

Anvil-Dev · Jun 12, 2024 · 7acf227 · 7acf227
1 parent d4e9714
commit 7acf227
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 109 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -18,6 +18,7 @@ declare module 'vue' {
     AMenu: typeof import('ant-design-vue/es')['Menu']
     APageHeader: typeof import('ant-design-vue/es')['PageHeader']
     AQrcode: typeof import('ant-design-vue/es')['QRCode']
+    ASpace: typeof import('ant-design-vue/es')['Space']
     ATypographyParagraph: typeof import('ant-design-vue/es')['TypographyParagraph']
     ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
     BlockAllCube: typeof import('./src/components/BlockAllCube.vue')['default']

diff --git a/src/App.vue b/src/App.vue
@@ -1,24 +1,22 @@
 @ -1,68 +1,98 @@
 <script setup lang="ts">
-import { h, reactive, ref } from 'vue';
+import {h, reactive, ref} from 'vue';
 import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   HomeOutlined,
   PicLeftOutlined,
   InfoCircleOutlined,
-  RedEnvelopeOutlined,
-  GithubOutlined
+  RedEnvelopeOutlined
 } from '@ant-design/icons-vue';
+import {createFromIconfontCN} from '@ant-design/icons-vue';
 import Icon from '@/assets/icon.svg';
-import Curseforge from '@/assets/curseforge.svg';
-import Modrinth from '@/assets/modrinth.svg';
-import BiliBili from '@/assets/bilibili.svg';
-import Mcmod from '@/assets/mcmod.svg';
-import QQ from '@/assets/QQ.svg';
-import KOOK from '@/assets/kook.svg';
 import router from '@/router/index.ts';
 
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_4583291_sbz536mbo0k.js',
+});
+
 const items = ref([
   {
     key: 'home',
@@ -67,54 +65,54 @@ function select(page: any) {
 
 <template>
   <a-page-header
-    class="app-header"
-    title="铁砧工艺"
-    sub-title="一个原版风科技模组"
-    @back="toggleCollapsed"
-    :avatar="{ src: Icon }">
+      class="app-header"
+      title="铁砧工艺"
+      sub-title="一个原版风科技模组"
+      @back="toggleCollapsed"
+      :avatar="{ src: Icon }">
     <template #backIcon>
-      <MenuUnfoldOutlined v-if="state.collapsed" />
-      <MenuFoldOutlined v-else />
+      <MenuUnfoldOutlined v-if="state.collapsed"/>
+      <MenuFoldOutlined v-else/>
     </template>
     <template #extra>
-      <a href="https://www.curseforge.com/minecraft/mc-mods/anvilcraft" target="_blank">
-        <a-image :src="Curseforge" style="height: 32px; width: 32px" :preview="false" />
-      </a>
-      <a href="https://modrinth.com/mod/anvilcraft" target="_blank">
-        <a-image :src="Modrinth" style="height: 32px; width: 32px" :preview="false" />
-      </a>
-      <a
-        href="https://space.bilibili.com/5930630/channel/collectiondetail?sid=2530932"
-        target="_blank">
-        <a-image :src="BiliBili" style="height: 32px; width: 32px" :preview="false" />
-      </a>
-      <a href="https://www.mcmod.cn/class/14068.html" target="_blank">
-        <a-image :src="Mcmod" style="height: 32px; width: 32px" :preview="false" />
-      </a>
-      <a href="https://github.com/Anvil-Dev/AnvilCraft" target="_blank">
-        <GithubOutlined style="font-size: 30px; color: black" />
-      </a>
-      <a href="https://qm.qq.com/q/OO9MeRbPIm" target="_blank">
-        <a-image :src="QQ" style="height: 32px; width: 32px" :preview="false" />
-      </a>
-      <a href="https://www.kookapp.cn/app/invite/mFBCbM" target="_blank">
-        <a-image :src="KOOK" style="height: 32px; width: 32px" :preview="false" />
-      </a>
+      <a-space class="url-list">
+        <a href="https://www.curseforge.com/minecraft/mc-mods/anvilcraft" target="_blank">
+          <icon-font class="icon" type="icon-curseforge"/>
+        </a>
+        <a href="https://modrinth.com/mod/anvilcraft" target="_blank">
+          <icon-font class="icon" type="icon-modrinth"/>
+        </a>
+        <a href="https://space.bilibili.com/5930630/channel/collectiondetail?sid=2530932" target="_blank">
+          <icon-font class="icon" type="icon-bilibili"/>
+        </a>
+        <a href="https://www.mcmod.cn/class/14068.html" target="_blank">
+          <icon-font class="icon" type="icon-mcmod"/>
+        </a>
+        <a href="https://github.com/Anvil-Dev/AnvilCraft" target="_blank">
+          <icon-font class="icon" type="icon-github"/>
+        </a>
+        <a href="https://qm.qq.com/q/OO9MeRbPIm" target="_blank">
+          <icon-font class="icon" type="icon-QQ"/>
+        </a>
+        <a href="https://chat.xiaoheihe.cn/ibjvvo" target="_blank">
+          <icon-font class="icon" type="icon-heybox"/>
+        </a>
+      </a-space>
     </template>
   </a-page-header>
   <a-layout>
     <a-layout-sider class="app-sider" :collapsed="state.collapsed" :trigger="null" collapsible>
       <a-menu
-        v-model:selectedKeys="state.selectedKeys"
-        mode="inline"
-        class="app-menu"
-        :items="items"
-        @select="select" />
+          v-model:selectedKeys="state.selectedKeys"
+          mode="inline"
+          class="app-menu"
+          :items="items"
+          @select="select"/>
     </a-layout-sider>
     <a-layout-content>
       <div class="app-scrollbar">
         <div class="app-content">
-          <router-view />
+          <router-view/>
         </div>
         <div class="app-footer">
           <span>
@@ -129,6 +127,7 @@ function select(page: any) {
 
 <style scoped lang="scss">
 .app-header {
+  max-height: 81px;
   border: 1px solid rgb(235, 237, 240);
   background-color: #ffffff;
 }
@@ -143,7 +142,7 @@ function select(page: any) {
 }
 
 .app-scrollbar {
-  height: calc(100vh - 82px);
+  height: calc(100vh - 81px);
   overflow: auto;
   scrollbar-gutter: stable;
 }
@@ -159,4 +158,10 @@ function select(page: any) {
   margin: 5px;
   min-height: calc(100vh - 173px);
 }
+
+.url-list {
+  font-size: 32px;
+  text-align: center;
+  max-height: 32px;
+}
 </style>
diff --git a/src/assets/QQ.svg b/src/assets/QQ.svg
diff --git a/src/assets/bilibili.svg b/src/assets/bilibili.svg
diff --git a/src/assets/curseforge.svg b/src/assets/curseforge.svg
diff --git a/src/assets/image-fill.svg b/src/assets/image-fill.svg
diff --git a/src/assets/kook.svg b/src/assets/kook.svg
diff --git a/src/assets/mcmod.svg b/src/assets/mcmod.svg
diff --git a/src/assets/modrinth.svg b/src/assets/modrinth.svg
diff --git a/src/assets/supporters.json b/src/assets/supporters.json
@@ -3,7 +3,7 @@
     "name": "枫丨渊",
     "avatar": "https://camo.githubusercontent.com/a5972681698d8034ee2455c68d130e53648c32c855672436f5cabb5866950718/68747470733a2f2f69312e6864736c622e636f6d2f6266732f666163652f336264386534383938383438323166333033313266653737356661663837616430303563613861632e6a7067",
     "link": "https://space.bilibili.com/3609691",
-    "money": 666.0
+    "money": 732.6
   },
   {
     "name": "BOTXue",
@@ -178,5 +178,11 @@
     "avatar": "https://camo.githubusercontent.com/8e305080d5f5c70f55aba2389bad74e878b303b7ffab8748419ac6994eb9a9d5/68747470733a2f2f69312e6864736c622e636f6d2f6266732f666163652f363331383663653133353239623136393064326135396363396364313062353439653765326136632e6a7067",
     "link": "https://space.bilibili.com/318916927",
     "money": 6.0
+  },
+  {
+    "name": "阿羊X_Y",
+    "avatar": "https://camo.githubusercontent.com/27bbec88a5d135033b6a643d4801458a92a569f1e8e825d4a978117f9f3278a1/68747470733a2f2f69322e6864736c622e636f6d2f6266732f666163652f653338396336353563303561646534616261343838363364363035303637643766623330316262362e6a7067",
+    "link": "https://space.bilibili.com/316720652",
+    "money": 200.0
   }
 ]
diff --git a/src/views/AboutPage.vue b/src/views/AboutPage.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { UserFilled } from '@element-plus/icons-vue';
+import {UserFilled} from '@element-plus/icons-vue';
 import Supporters from '@/assets/supporters.json';
 import Authors from '@/assets/authors.json';
 import Contributors from '@/assets/contributors.json';
-import BiliBili from '@/assets/bilibili.svg';
+import {createFromIconfontCN} from '@ant-design/icons-vue';
 
 Supporters.sort((a, b) => b.money - a.money);
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_4583291_sbz536mbo0k.js',
+});
 </script>
 
 <template>
@@ -15,18 +19,18 @@ Supporters.sort((a, b) => b.money - a.money);
         <template #title>
           <a-avatar size="large" :src="author.avatar">
             <template #icon>
-              <UserFilled />
+              <UserFilled/>
             </template>
           </a-avatar>
           {{ author.name }}
         </template>
         <template #extra>
           <a
-            v-if="author.uid"
-            :href="'https://space.bilibili.com/' + author.uid"
-            target="_blank"
-            style="margin-right: 80px">
-            <a-image :src="BiliBili" style="height: 32px; width: 32px" :preview="false" />
+              v-if="author.uid"
+              :href="'https://space.bilibili.com/' + author.uid"
+              target="_blank"
+              style="margin-right: 80px;font-size: 32px">
+            <icon-font class="icon" type="icon-bilibili"/>
           </a>
         </template>
         <p v-for="desc in author.desc">
@@ -47,17 +51,17 @@ Supporters.sort((a, b) => b.money - a.money);
         <a-card class="sub-card" hoverable bordered>
           <template #extra>
             <a
-              v-if="contributor.uid"
-              :href="'https://space.bilibili.com/' + contributor.uid"
-              target="_blank"
-              style="margin-right: 80px">
-              <a-image :src="BiliBili" style="height: 32px; width: 32px" :preview="false" />
+                v-if="contributor.uid"
+                :href="'https://space.bilibili.com/' + contributor.uid"
+                target="_blank"
+                style="margin-right: 80px;font-size: 32px">
+              <icon-font class="icon" type="icon-bilibili"/>
             </a>
           </template>
           <template #title>
             <a-avatar :src="contributor.avatar" size="large" style="margin: 5px">
               <template #icon>
-                <UserFilled />
+                <UserFilled/>
               </template>
             </a-avatar>
             <a-typography-text style="font-size: 15px">
@@ -77,7 +81,7 @@ Supporters.sort((a, b) => b.money - a.money);
           <template #title>
             <a-avatar :src="supporter.avatar" size="large" style="margin: 5px">
               <template #icon>
-                <UserFilled />
+                <UserFilled/>
               </template>
             </a-avatar>
             <a-typography-text style="font-size: 15px">

diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import ImageFill from '@/assets/image-fill.svg';
 import Banner from '@/assets/banner.png';
 </script>
 
 <template>
   <a-card hoverable bordered>
     <div style="width: 100%; text-align: center">
-      <a-image
-        :width="640"
-        :height="360"
-        style="width: 100%"
-        :src="Banner"
-        :fallback="ImageFill" />
+      <a-image :width="640" :height="360" style="width: 100%" :src="Banner"/>
     </div>
     <a-divider />
     <a-typography-paragraph>