莱工白嫖指南的一种设计（？
这是一个小demo
hana初学vue的拙作
在莱工wiki页面基础上改成了vue并且加了一点点交互
mediawiki里面跑不了vue就只能放在这里了（话说这里居然能跑！（至少预览是能跑的... 不知道会不会出现什么问题QAQ））
主题设计请见：
https://wiki.ria.red/wiki/%E8%8E%B1%E8%8C%B5/wiki%E4%B8%BB%E9%A2%98 现在正在使用的莱工wiki页面：
https://wiki.ria.red/wiki/%E8%8E%B1%E7%8F%8A%E4%B9%8B%E7%AA%97%E5%B7%A5%E4%B8%9A%E5%8C%BA
点击下方卡片右上角 Edit 可以进入编辑模式
仅前端代码，不会保存所做更改
这是二级标题
这是三级标题
这是内容
这是四级标题
这是内容
这是五级标题
源码
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div id="app">
<div class="borderbox">
<h2>这是二级标题</h2>
<div>
<div class="subheader">
<h3>这是三级标题</h3>
<div>
这是内容
<div class="subheader">
<h4>这是四级标题</h4>
<div>
这是内容
<h5>这是五级标题</h5>
<!-- 添加模式切换按钮 -->
<div class="mode-toggle">
<a href="javascript:void(0)" @click="toggleEditMode">
{{ isEditMode ? 'Exit' : 'Edit' }}
</a>
</div>
<!-- 只在编辑模式下显示添加机器的表单 -->
<div class="machine-container" v-if="isEditMode">
<h6>添加机器：</h6>
<input
type="text"
placeholder="机器名称"
v-model="newMachine.name"
/>
<div class="machine-info">
<b>机器坐标：</b
><input
type="text"
placeholder="机器坐标 x: ,y: ,z:"
v-model="newMachine.coord"
/><br />
<b>机器产出：</b
><input
type="text"
placeholder="机器产出"
v-model="newMachine.output"
/>
</div>
<p>
<textarea
type="text"
placeholder="机器描述"
v-model="newMachine.desc"
rows="5"
cols="50"
></textarea>
</p>
<div class="add">
<a
href="javascript:void(0);"
@click="add
"
>add</a
>
</div>
</div>
<!-- 机器列表 -->
<div
class="machine-container"
v-for="(machine,index) in machines"
:key="index"
>
<h6>{{ machine.name }}</h6>
<span
v-for="tag in machine.tags"
:key="tag"
class="tag"
:class="`tag-${tagMap[tag].color}`"
>
{{ tagMap[tag].text }}
<!-- 编辑模式下的标签删除按钮 -->
<a
href="javascript:void(0);"
class="tag-remove"
v-if="isEditMode"
@click="removeTag(machine, tag)"
>×</a
>
</span>
<!-- 编辑模式下的标签管理区域 -->
<div class="tag-manager" v-if="isEditMode">
<div class="tag-selector">
<select v-model="selectedTag">
<option
v-for="(tagInfo, tagKey) in availableTags"
:key="tagKey"
:value="tagKey"
:disabled="machine.tags.includes(tagKey)"
>
{{ tagInfo.text }}
</option>
</select>
<button
class="add-tag-btn"
@click="addTag(machine, selectedTag)"
:disabled="!selectedTag || machine.tags.includes(selectedTag)"
>
添加标签
</button>
</div>
</div>
<div class="machine-info">
<b>机器坐标：</b>{{ machine.coord }}<br />
<b>机器产出：</b>{{ machine.output }}
</div>
<pre>{{ machine.desc }}</pre>
<!-- 只在编辑模式下显示描述编辑 -->
<textarea
type=""
placeholder="编辑描述"
v-model="machine.desc"
v-if="isEditMode"
rows="5"
cols="50"
></textarea>
<!-- 只在编辑模式下显示删除按钮 -->
<div class="del" v-if="isEditMode">
<a href="javascript:void(0);" @click="remove(index)"
>delete</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="module">
import {
createApp,
ref,
reactive,
} from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
createApp({
setup() {
const isEditMode = ref(false);
const toggleEditMode = () => {
isEditMode.value = !isEditMode.value;
};
const tagMap = {
free: { text: "可白嫖", color: "green" },
open: { text: "开放使用", color: "green" },
afk: { text: "挂机取用", color: "blue" },
onDemand: { text: "按需取用", color: "yellow" },
afkOnly: { text: "afk", color: "purple" },
bot: { text: "bot", color: "purple" },
autoClick: { text: "连点器", color: "purple" },
fragile: { text: "不抗卸载", color: "red" },
disabled: { text: "已停用", color: "magenta" },
deprecated: { text: "停止维护", color: "magenta" },
};
const selectedTag = ref("");
const availableTags = tagMap;
const addTag = (machine, tagKey) => {
if (tagKey && !machine.tags.includes(tagKey)) {
machine.tags.push(tagKey);
selectedTag.value = ""; // 清空选择
}
};
// 删除标签方法
const removeTag = (machine, tagKey) => {
const index = machine.tags.indexOf(tagKey);
if (index !== -1) {
machine.tags.splice(index, 1);
}
};
const newMachine = reactive({
name: "",
coord: "x:,y:,z:",
output: "",
desc: "",
tags: [],
});
const machines = reactive([
{
name: "机器1",
coord: "x:N/A,y:N/A,z:N/A",
output: "占位符物品A,占位符物品B",
desc: "机器描述",
tags: ["free", "afk", "fragile"],
},
{
name: "机器2",
coord: "x:N/A,y:N/A,z:N/A",
output: "占位符物品A,占位符物品B",
desc: "机器描述",
tags: ["onDemand", "fragile"],
},
{
name: "笨蛋姬",
coord: "x:114,y:514,z:1919",
output: "笨蛋, 投注, 猪扒",
desc: "呜呜呜",
tags: ["open", "autoClick", "deprecated"],
},
]);
const add = () => {
machines.push({
name: newMachine.name,
coord: newMachine.coord,
output: newMachine.output,
desc: newMachine.desc,
tags: newMachine.tags,
});
// 清空输入框
newMachine.name = "";
newMachine.coord = "x:,y:,z:";
newMachine.output = "";
newMachine.desc = "";
tags: [];
};
const remove = (index) => {
machines.splice(index, 1);
};
return {
machines,
add,
remove,
newMachine,
isEditMode,
toggleEditMode,
tagMap,
selectedTag,
availableTags,
addTag,
removeTag,
};
},
}).mount("#app");
</script>
<style>
.borderbox {
background: linear-gradient(to right, #75d1ff, #fcc8e7);
padding: 5px;
margin: 1rem 0;
border-radius: 1rem;
box-shadow: 0rem 0rem 1rem rgb(140, 140, 140);
font-family: sans-serif;
line-height: 1.5;
}
.borderbox > h2 {
margin: 0;
padding: 0.7rem 1rem;
color: white;
font-weight: bold;
}
.borderbox > div {
margin: 0;
padding: 1rem 1.5rem;
background-color: white;
border-radius: 1rem;
}
.subheader > h3 {
padding: 0.1rem;
border-left: 0.3rem solid #fcc8e7;
padding-left: 0.5rem;
margin-bottom: 1rem;
}
.subheader > h4 {
padding: 0.1rem;
border-left: 0.3rem solid #75d1ff;
padding-left: 0.5rem;
}
.subheader > div {
margin-left: 1rem;
}
h5 {
padding: 0.1rem;
border-left: 0.3rem solid #ffd740;
padding-left: 0.5rem;
margin-bottom: 1rem;
}
.machine-container {
border-radius: 1rem;
padding: 1rem;
margin-right: 1.5rem;
margin-bottom: 1.5rem;
background-color: #f8f1f6;
color: #1c1b1d;
}
.machine-container > h6 {
display: inline;
margin-right: 0.5rem;
}
.machine-info {
padding: 0.01rem 0.5rem;
margin: 0.5rem;
color: #546e7a;
font-size: 0.8rem;
border-top: 0.1rem solid #e5dfe2;
border-bottom: 0.1rem solid #e5dfe2;
}
.del {
text-align: right;
}
.del > a {
color: rgb(255, 180, 180);
}
.add {
text-align: right;
}
.add > a {
color: rgb(73, 182, 255);
}
.mode-toggle {
text-align: right;
margin-right: 2rem;
margin-bottom: 1rem;
}
.mode-toggle > a {
color: #546e7a;
font-weight: bold;
}
.tag {
display: inline-block;
color: #37474f;
padding: 0rem 0.5rem;
border-radius: 0.5rem;
margin: 0.1rem 0.2rem;
}
.tag-red {
background-color: #ff8a80;
}
.tag-green {
background-color: #ccff90;
}
.tag-blue {
background-color: #80d8ff;
}
.tag-yellow {
background-color: #ffd180;
}
.tag-purple {
background-color: #e1bee7;
}
.tag-magenta {
background-color: #ff80ab;
}
.tag-remove {
color: red;
text-decoration: none;
}
textarea {
white-space: pre-wrap;
}
</style>
</html>莱工白嫖指南的一种设计（？
https://blog.hananya.cafe/archives/laigongwiki-demo