fix:样式优化完善。

This commit is contained in:
tianyongbao
2025-12-13 22:30:26 +08:00
parent 03bb3452f6
commit c16de46e47

View File

@@ -71,19 +71,19 @@
<button class="add-btn small" @click="showAddToolDialog(category)">+ 添加网址</button>
</div>
<div class="tool-list">
<div v-for="tool in category.tools" :key="tool.id" class="tool-item" @click="openToolUrl(tool.url)">
<div v-for="tool in category.tools" :key="tool.id" class="tool-item">
<div class="tool-main">
<div class="tool-icon" :style="{background: tool.color}">
<span>{{ tool.icon }}</span>
<div class="tool-icon" :style="{background: tool.color}" @click="openToolUrl(tool.url, $event)" title="点击打开">
<span style="pointer-events: none;">{{ tool.icon }}</span>
</div>
<div class="tool-info">
<div class="tool-info tool-drag-handle">
<div class="tool-name">{{ tool.name }}</div>
<div class="tool-desc">{{ tool.desc }}</div>
</div>
<span class="tool-sort">排序: {{ tool.sortOrder || 0 }}</span>
<span class="tool-sort tool-drag-handle">排序: {{ tool.sortOrder || 0 }}</span>
</div>
<div class="tool-footer">
<div class="tool-url">{{ tool.url }}</div>
<div class="tool-url" @click="openToolUrl(tool.url, $event)" style="cursor: pointer; text-decoration: underline;" title="点击打开">{{ tool.url }}</div>
<div class="tool-actions" @click.stop>
<button class="edit-btn" @click="editTool(category, tool)">编辑</button>
<button class="delete-btn" @click="deleteTool(category, tool)">删除</button>
@@ -938,7 +938,7 @@ export default {
toolLists.forEach((toolListEl, index) => {
const sortable = Sortable.create(toolListEl, {
animation: 150,
handle: '.tool-item',
handle: '.tool-drag-handle', // 只能通过拖拽手柄区域拖动
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen',
dragClass: 'sortable-drag',
@@ -1060,6 +1060,16 @@ export default {
this.showMessage('排序保存失败', 'error')
await this.loadData()
}
},
// 打开网址
openToolUrl(url, event) {
if (event) {
event.stopPropagation()
}
if (url) {
window.open(url, '_blank')
}
}
}
}
@@ -1481,7 +1491,6 @@ export default {
border-radius: 6px;
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
cursor: move; // 显示可拖拽
&:hover {
background: #f3f4f6;
@@ -1504,11 +1513,23 @@ export default {
color: white;
font-weight: bold;
flex-shrink: 0;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
&:active {
transform: scale(1.05);
}
}
.tool-info {
flex: 1;
min-width: 0;
cursor: move; // 拖拽手柄
.tool-name {
font-size: 13px;
@@ -1538,6 +1559,7 @@ export default {
white-space: nowrap;
font-weight: 500;
flex-shrink: 0;
cursor: move; // 拖拽手柄
}
}