Skip to content

Commit 4725ba3

Browse files
pysio2007pysio2007
committed
feat: 增加工作台组件和GTNH笔记
1 parent 93ec643 commit 4725ba3

File tree

4 files changed

+189
-0
lines changed

4 files changed

+189
-0
lines changed

‎src/.vuepress/client.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import DNSLeak from "./components/DNSLeak.vue";
2020
import GitCommits from "./components/GitCommits.vue";
2121
import MinecarftMod from "./components/MinecarftMod.vue";
2222
import PwaCheck from "./components/PwaCheck.vue";
23+
import CraftingTable from "./components/CraftingTable.vue";
2324

2425

2526
export default defineClientConfig({
@@ -43,6 +44,7 @@ export default defineClientConfig({
4344
app.component("GitCommits", GitCommits);
4445
app.component("MinecarftMod", MinecarftMod);
4546
app.component("PwaCheck", PwaCheck);
47+
app.component("CraftingTable", CraftingTable);
4648
Sentry.init({
4749
dsn: "https://188c5d205854b35b009d4ad76674d3bc@o4508158776705024.ingest.us.sentry.io/4508158792826880", // 替换为你的 Sentry DSN
4850
integrations: [

‎src/.vuepress/components/CraftingTable.vue

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<script>
2+
export default {
3+
name: 'CraftingTable',
4+
props: {
5+
items: {
6+
type: Array,
7+
default: () => Array(9).fill(null)
8+
},
9+
result: {
10+
type: Object,
11+
default: null
12+
}
13+
},
14+
methods: {
15+
getIconUrl(icon) {
16+
if (!icon) return '';
17+
// 检查是否为完整URL
18+
return icon.startsWith('http') || icon.startsWith('/') ?
19+
icon :
20+
`https://files.pysio.online/files/Pysio-Imges/${icon}.png`;
21+
}
22+
}
23+
}
24+
</script>
25+
26+
<template>
27+
<div class="crafting-table">
28+
<div class="crafting-grid">
29+
<div class="grid-container">
30+
<div v-for="(item, index) in items" :key="index" class="grid-slot">
31+
<div v-if="item" class="item">
32+
<img :src="getIconUrl(item.icon)" :alt="item.name">
33+
<span v-if="item.count > 1" class="count">{{ item.count }}</span>
34+
<span class="tooltip">{{ item.name }}</span>
35+
</div>
36+
</div>
37+
</div>
38+
<div class="arrow">→</div>
39+
<div class="result-slot">
40+
<div v-if="result" class="item result">
41+
<img :src="getIconUrl(result.icon)" :alt="result.name">
42+
<span v-if="result.count > 1" class="count">{{ result.count }}</span>
43+
<span class="tooltip">{{ result.name }}</span>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
</template>
49+
50+
<style scoped>
51+
.crafting-table {
52+
display: inline-block;
53+
padding: 10px;
54+
background: #C6C6C6;
55+
border: 2px solid #373737;
56+
border-radius: 4px;
57+
}
58+
59+
.crafting-grid {
60+
display: flex;
61+
align-items: center;
62+
gap: 10px;
63+
}
64+
65+
.grid-container {
66+
display: grid;
67+
grid-template-columns: repeat(3, 1fr);
68+
gap: 4px;
69+
background: #8B8B8B;
70+
padding: 5px;
71+
border: 2px solid #373737;
72+
}
73+
74+
.grid-slot {
75+
width: 32px;
76+
height: 32px;
77+
background: #b3b1b1;
78+
border: 2px solid #8B8B8B;
79+
}
80+
81+
.arrow {
82+
font-size: 24px;
83+
color: #373737;
84+
margin: 0 10px;
85+
text-shadow: none;
86+
}
87+
88+
.result-slot {
89+
width: 32px;
90+
height: 32px;
91+
background: #E0E0E0;
92+
border: 2px solid #8B8B8B;
93+
}
94+
95+
.item {
96+
width: 100%;
97+
height: 100%;
98+
position: relative;
99+
display: flex;
100+
align-items: center;
101+
justify-content: center;
102+
}
103+
104+
.item img {
105+
width: 100%;
106+
height: 100%;
107+
object-fit: contain;
108+
}
109+
110+
.tooltip {
111+
position: absolute;
112+
bottom: 100%;
113+
left: 50%;
114+
transform: translateX(-50%);
115+
background: #100010;
116+
color: white;
117+
padding: 4px 8px;
118+
border-radius: 4px;
119+
font-size: 12px;
120+
white-space: nowrap;
121+
opacity: 0;
122+
visibility: hidden;
123+
transition: 0.2s ease;
124+
}
125+
126+
.item:hover .tooltip {
127+
opacity: 1;
128+
visibility: visible;
129+
}
130+
131+
.count {
132+
position: absolute;
133+
right: 1px;
134+
bottom: 1px;
135+
font-size: 12px;
136+
color: white;
137+
text-shadow: 1px 1px 1px #000;
138+
font-weight: bold;
139+
}
140+
</style>

‎src/posts/daily/GTNH.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: GTNH笔记本
3+
date: 2024-12-14
4+
icon: fa-kit fa-creeper
5+
category: daily
6+
tag:
7+
- GTNH
8+
- 日常
9+
---
10+
11+
> [!info]
12+
> 这里存放着我游玩GTNH时的笔记本，记录了一些有用的配方和信息。
13+
14+
## 合金
15+
16+
### 耐酸铝 (Alumite)
17+
18+
- 熔炼 5 个铝锭
19+
- 熔炼 2 个钢锭
20+
- 熔炼 1 个黑曜石
21+
22+
得到 2 个耐酸铝
23+
24+
<CraftingTable
25+
:items="[
26+
{icon: 'Aluminium', name: '铝锭', count: 5},
27+
{icon: 'Steel', name: '钢锭', count: 2},
28+
{icon: 'Obsidian', name: '黑曜石', count: 1},
29+
null,
30+
null,
31+
null,
32+
null,
33+
null,
34+
null
35+
]"
36+
:result="{
37+
icon: 'Alumite',
38+
name: '耐酸铝',
39+
count: 2
40+
}"
41+
/>

‎src/posts/develop/icon.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,10 @@ tag:
7070

7171
```javascript
7272
<i class="fa-kit fa-vscode"></i>
73+
```
74+
75+
### Minecraft Creeper <i class="fa-kit fa-creeper"></i>
76+
77+
```javascript
78+
<i class="fa-kit fa-creeper"></i>
7379
```

0 commit comments

Comments
 (0)