fix:样式优化完善。
This commit is contained in:
@@ -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; // 拖拽手柄
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user