|
|
@@ -40,7 +40,7 @@
|
|
|
margin-bottom: 10px;
|
|
|
border-radius: 4px;
|
|
|
/*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
|
|
|
- /* 固定在顶部*/
|
|
|
+ /* 固定在顶部*/
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
padding: 5px;
|
|
|
@@ -58,7 +58,7 @@
|
|
|
margin: 0 10px;
|
|
|
/* 鼠标变成手*/
|
|
|
cursor: pointer;
|
|
|
- /* 圆角*/
|
|
|
+ /* 圆角*/
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
@@ -171,13 +171,40 @@
|
|
|
.edit-dialog .el-dialog__body {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
- .el-card__header{
|
|
|
+
|
|
|
+ .el-card__header {
|
|
|
padding: 8px 20px;
|
|
|
}
|
|
|
- .show-hover-class{
|
|
|
+
|
|
|
+ .show-hover-class {
|
|
|
opacity: 0;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .show-hover-class:hover {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+ <style scoped>
|
|
|
+ /* 如果是 scoped CSS 需要穿透 >>> 或者使用 ::v-deep */
|
|
|
+ .extra-links {
|
|
|
+ display: flex !important;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px; /* 可选：添加标签间距 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 如果标签宽度需要撑满容器 */
|
|
|
+ .extra-links .el-tag {
|
|
|
+ width: 100%;
|
|
|
+ margin-right: 0 !important; /* 清除默认右边距 */
|
|
|
}
|
|
|
|
|
|
+ /* 链接对齐优化 */
|
|
|
+ .extra-links .el-tag .el-link {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
</style>
|
|
|
<script src="js/Sortable.min.js"></script>
|
|
|
<script src="js/vuedraggable.umd.min.js"></script>
|
|
|
@@ -186,45 +213,45 @@
|
|
|
<body>
|
|
|
<div id="app" class="tab-container">
|
|
|
<!-- 标签排序栏 -->
|
|
|
- <div class="tab-sort-bar show-hover-class" style="display: flex">
|
|
|
- <div style="">排序：</div>
|
|
|
- <draggable
|
|
|
- :disabled="readOnly"
|
|
|
- v-model="groups"
|
|
|
- @change="onTabOrderChange"
|
|
|
- handle=".drag-handle"
|
|
|
- style="display: flex; flex-wrap: wrap;"
|
|
|
- animation="300">
|
|
|
- <div
|
|
|
- v-for="item in groups"
|
|
|
- :key="item"
|
|
|
- class="tab-item drag-handle"
|
|
|
- @click="scrollToGroup(item.name)">
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- </div>
|
|
|
- </draggable>
|
|
|
- </div>
|
|
|
+ <div class="tab-sort-bar show-hover-class" style="display: flex">
|
|
|
+ <div style="">排序：</div>
|
|
|
+ <draggable
|
|
|
+ :disabled="readOnly"
|
|
|
+ v-model="groups"
|
|
|
+ @change="onTabOrderChange"
|
|
|
+ handle=".drag-handle"
|
|
|
+ style="display: flex; flex-wrap: wrap;"
|
|
|
+ animation="300">
|
|
|
+ <div
|
|
|
+ v-for="item in groups"
|
|
|
+ :key="item"
|
|
|
+ class="tab-item drag-handle"
|
|
|
+ @click="scrollToGroup(item.name)">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ </draggable>
|
|
|
+ </div>
|
|
|
<!-- 分组内容展示 -->
|
|
|
<div v-for="(group,group_index) in groups"
|
|
|
:key="group.name"
|
|
|
:id="'group-'+group.name">
|
|
|
<div class="group-title">
|
|
|
-<!-- <i class="el-icon-folder-opened"></i>-->
|
|
|
+ <!-- <i class="el-icon-folder-opened"></i>-->
|
|
|
<div style="margin-right: 20px; margin-left: 5px">{{ group.name }}</div>
|
|
|
|
|
|
- <div class="show-hover-class" v-if="!readOnly" style="display: flex" >
|
|
|
+ <div class="show-hover-class" v-if="!readOnly" style="display: flex">
|
|
|
<!-- 新增按钮 -->
|
|
|
- <el-button type="text" @click.stop="addTabAfter(group.name)" >
|
|
|
+ <el-button type="text" @click.stop="addTabAfter(group.name)">
|
|
|
<i class="el-icon-plus"></i>
|
|
|
</el-button>
|
|
|
- <el-button type="text" @click.stop="editCurrentTabName(group.name)" >
|
|
|
+ <el-button type="text" @click.stop="editCurrentTabName(group.name)">
|
|
|
<i class="el-icon-edit"></i>
|
|
|
</el-button>
|
|
|
- <el-button type="text" @click.stop="deleteTab(group.name)" :disabled="Object.keys(groups).length <= 1" >
|
|
|
+ <el-button type="text" @click.stop="deleteTab(group.name)" :disabled="Object.keys(groups).length <= 1">
|
|
|
<i class="el-icon-delete"></i>
|
|
|
</el-button>
|
|
|
- <div style="margin: 0 20px;color: #ccc;" v-if="!readOnly" >|</div>
|
|
|
- <el-button type="text" @click.stop="addContentItemAfter(group.name, group.datas.length-1)" >
|
|
|
+ <div style="margin: 0 20px;color: #ccc;" v-if="!readOnly">|</div>
|
|
|
+ <el-button type="text" @click.stop="addContentItemAfter(group.name, group.datas.length-1)">
|
|
|
新增卡片
|
|
|
</el-button>
|
|
|
</div>
|
|
|
@@ -275,7 +302,7 @@
|
|
|
<div class="item-content">
|
|
|
<div style="width: 100%">
|
|
|
<div class="item-description">{{ item.description || item.title }}</div>
|
|
|
- <el-tooltip>
|
|
|
+ <el-tooltip placement="bottom-start">
|
|
|
<div class="link-section">
|
|
|
<el-link
|
|
|
type="primary"
|
|
|
@@ -411,7 +438,7 @@
|
|
|
originalTab: '',
|
|
|
originalIndex: -1, // 编辑时，记录原始数据在当前标签页中的索引
|
|
|
targetTabIndex: -1, // 编辑时，记录目标标签页名称
|
|
|
- targetTab:''
|
|
|
+ targetTab: ''
|
|
|
},
|
|
|
mounted() {
|
|
|
pageManager.init().then(res => {
|
|
|
@@ -422,22 +449,6 @@
|
|
|
this.groups = JSON.parse(showContent);
|
|
|
}
|
|
|
if (pageManager.isReadOnly()) this.readOnly = true;
|
|
|
-
|
|
|
-
|
|
|
- // .show-hover-class 鼠标滑过，设置 透明度为可见，移走则为0
|
|
|
- this.$nextTick(()=>{
|
|
|
- const elements = document.querySelectorAll('.show-hover-class');
|
|
|
- for (let i = 0; i < elements.length; i++) {
|
|
|
- elements[i].addEventListener('mouseenter', function () {
|
|
|
- this.style.opacity = 1;
|
|
|
- });
|
|
|
- elements[i].addEventListener('mouseleave', function () {
|
|
|
- this.style.opacity = 0;
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -472,7 +483,7 @@
|
|
|
|
|
|
this.isEditing = true;
|
|
|
this.dialogVisible = true;
|
|
|
- this.currentItem = JSON.parse(JSON.stringify(item))
|
|
|
+ this.currentItem = JSON.parse(JSON.stringify(item))
|
|
|
this.targetTab = group.name;
|
|
|
this.originalTab = group.name;
|
|
|
},
|
|
|
@@ -569,7 +580,7 @@
|
|
|
this.$message({
|
|
|
type: 'info',
|
|
|
message: '已取消删除'
|
|
|
- });
|
|
|
+ });
|
|
|
});
|
|
|
},
|
|
|
// 修改标签名
|
|
|
@@ -616,7 +627,7 @@
|
|
|
this.$message({
|
|
|
type: 'info',
|
|
|
message: '已取消删除'
|
|
|
- });
|
|
|
+ });
|
|
|
});
|
|
|
},
|
|
|
|
tianyun