qdintc/intc-workbenches
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:样式优化完善。

Browse Source
This commit is contained in:
tianyongbao
2025-12-13 22:30:26 +08:00
parent 03bb3452f6
commit c16de46e47
1 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/ManagePage.vue
View File

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