U: 删除多余注释，HomeView模板中添加<h1>测试</h1>
A: 添加element-plus及其依赖库（@ctrl/tinycolor、@element-plus/icons-vue、@floating-ui、@vueuse/core等） A: package-lock.json新增多个依赖（async-validator、dayjs、exsolve、confbox等） U: 更新部分依赖版本以及开发/可选/对等依赖标识
This commit is contained in:
jimmy committed
1 parent
e948cc3784
commit
eb3166280b
13 files changed
+881
-375
No files matched your search
@@ -33,15 +33,21 @@ const invokeCommand = async (module: CommandType) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="modules-grid">
|
||||
<div v-for="(module, index) in modules" :key="index" class="module-card">
|
||||
<h2 class="module-title">{{ module.name }}</h2>
|
||||
<p class="module-description">{{ module.description }}</p>
|
||||
<div class="p-6 font-sans">
|
||||
<div class="flex flex-wrap gap-6 w-full justify-center">
|
||||
<div v-for="(module, index) in modules" :key="index" class="w-full border shadow-lg p-4 shadow-md rounded-md">
|
||||
<h2 class="text-lg font-semibold mb-2 select-text pointer-events-auto">
|
||||
{{ module.name }}
|
||||
</h2>
|
||||
<p class="text-gray-600 mb-4">{{ module.description }}</p>
|
||||
|
||||
<div class="params-container">
|
||||
<div v-for="(param, paramIndex) in module.params" :key="paramIndex" class="param-item">
|
||||
<label :for="`${module.name}-${param.name}`" class="param-label">
|
||||
<div class="w-full flex flex-row">
|
||||
<div
|
||||
v-for="(param, paramIndex) in module.params"
|
||||
:key="paramIndex"
|
||||
class="flex flex-col gap-1 w-full m-2"
|
||||
>
|
||||
<label :for="`${module.name}-${param.name}`" class="block font-bold text-red-400">
|
||||
{{ param.label }}
|
||||
</label>
|
||||
<input
|
||||
@@ -50,136 +56,32 @@ const invokeCommand = async (module: CommandType) => {
|
||||
v-model="param.value"
|
||||
:placeholder="param.placeholder"
|
||||
type="text"
|
||||
class="text-input"
|
||||
class="w-full px-3 py-2 border border-gray-500 rounded-md focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300"
|
||||
/>
|
||||
<input
|
||||
v-if="param.type === 'checkbox'"
|
||||
:id="`${module.name}-${param.name}`"
|
||||
v-model="param.value"
|
||||
type="checkbox"
|
||||
class="checkbox-input"
|
||||
class="rounded checked:bg-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button @click="invokeCommand(module)" class="action-button">触发 {{ module.name }}</button>
|
||||
<button
|
||||
@click="invokeCommand(module)"
|
||||
class="mt-4 w-full py-2 bg-blue-700 text-white rounded-md border-none cursor-pointer hover:bg-blue-600"
|
||||
>
|
||||
触发 {{ module.name }}
|
||||
</button>
|
||||
|
||||
<div v-if="module.result" class="result-container">
|
||||
<h3 class="result-title">结果</h3>
|
||||
<pre class="result-content">{{ module.result }}</pre>
|
||||
<div v-if="module.result" class="mt-4 p-3 bg-gray-100 border border-gray-300 rounded-md">
|
||||
<div class="font-semibold mb-2">结果</div>
|
||||
<div class="text-sm whitespace-pre-wrap select-text pointer-events-auto">
|
||||
{{ module.result }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 1.5rem; // p-6
|
||||
font-family: sans-serif;
|
||||
|
||||
.modules-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem; // gap-6
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
.module-card {
|
||||
width: 100%;
|
||||
padding: 1rem; // p-4
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // shadow-md
|
||||
border-radius: 0.375rem; // rounded-md
|
||||
|
||||
.module-title {
|
||||
font-size: 1.125rem; // text-lg
|
||||
font-weight: 600; // font-semibold
|
||||
margin-bottom: 0.5rem; // mb-2
|
||||
user-select: text; /* 允许选中 */
|
||||
pointer-events: auto; /* 确保可以响应鼠标操作 */
|
||||
}
|
||||
|
||||
.module-description {
|
||||
color: #718096; // text-gray-600
|
||||
margin-bottom: 1rem; // mb-4
|
||||
}
|
||||
|
||||
.params-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.param-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem; // space-y-1
|
||||
width: 100%;
|
||||
margin: 0.5rem; // m-2
|
||||
|
||||
.param-label {
|
||||
display: block;
|
||||
font-weight: 700; // font-bold
|
||||
color: #f56565; // text-red-400
|
||||
}
|
||||
|
||||
.text-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem; // px-3 py-2
|
||||
border: 1px solid #e2e8f0; // border border-gray-300
|
||||
border-radius: 0.375rem; // rounded-md
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #4299e1;
|
||||
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-input {
|
||||
border-radius: 0.25rem; // rounded
|
||||
|
||||
&:checked {
|
||||
background-color: #4299e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-button {
|
||||
margin-top: 1rem; // mt-4
|
||||
width: 100%;
|
||||
padding: 0.5rem 0; // py-2
|
||||
background-color: #2b6cb0; // bg-blue-700
|
||||
color: white;
|
||||
border-radius: 0.375rem; // rounded-md
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #3182ce; // bg-blue-600
|
||||
}
|
||||
}
|
||||
|
||||
.result-container {
|
||||
margin-top: 1rem; // mt-4
|
||||
padding: 0.75rem; // p-3
|
||||
background-color: #f7fafc; // bg-gray-100
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 0.375rem; // rounded-md
|
||||
|
||||
.result-title {
|
||||
font-weight: 600; // font-semibold
|
||||
margin-bottom: 0.5rem; // mb-2
|
||||
}
|
||||
|
||||
.result-content {
|
||||
font-size: 0.875rem; // text-sm
|
||||
white-space: pre-wrap;
|
||||
user-select: text; /* 允许选中 */
|
||||
pointer-events: auto; /* 确保可以响应鼠标操作 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user