|
|
@@ -0,0 +1,412 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>Dynamic Clipboard Tabs</title>
|
|
|
+ <script src="https://map.tianyunperfect.cn/common-page.js"></script>
|
|
|
+
|
|
|
+ <script src="js/clipboard.min.js"></script>
|
|
|
+ <script src="js/vue.min.js"></script>
|
|
|
+ <script src="elementUI/index.js"></script>
|
|
|
+ <link rel="stylesheet" href="elementUI/index.css"/>
|
|
|
+ <style>
|
|
|
+ .tab-container {
|
|
|
+ max-width: 800px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-content {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-item {
|
|
|
+ margin: 10px;
|
|
|
+ /*padding: 15px;*/
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: all .3s;
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(33% - 20px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-item:hover {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs__item.is-active {
|
|
|
+ color: #409EFF !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs__active-bar {
|
|
|
+ background-color: #409EFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-buttons {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-card {
|
|
|
+ width: 100%;
|
|
|
+ border: none;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .copy-btn {
|
|
|
+ color: #409EFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .copy-btn:hover {
|
|
|
+ color: #206BC4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-item {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .content-item {
|
|
|
+ width: calc(50% - 20px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 480px) {
|
|
|
+ .content-item {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <script src="js/Sortable.min.js"></script>
|
|
|
+ <script src="js/vuedraggable.umd.min.js"></script>
|
|
|
+ <script src="js/axios.min.js"></script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div id="app" class="tab-container">
|
|
|
+ <!-- 标签导航 -->
|
|
|
+ <el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(content, tabName) in myObj"
|
|
|
+ :key="tabName"
|
|
|
+ :label="tabName"
|
|
|
+ :name="tabName">
|
|
|
+ <!-- 标签页内容 -->
|
|
|
+ <div class="tab-content">
|
|
|
+ <!-- 内容项列表 -->
|
|
|
+ <draggable
|
|
|
+ v-model="myObj[tabName]"
|
|
|
+ tag="div"
|
|
|
+ @change="onDragChange(tabName)"
|
|
|
+ handle=".drag-handle"
|
|
|
+ class="content-list">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in myObj[tabName]"
|
|
|
+ :key="item.key"
|
|
|
+ class="content-item"
|
|
|
+ @click.stop="copyToClipboard(item.value)"
|
|
|
+ >
|
|
|
+ <el-card shadow="hover" class="item-card">
|
|
|
+ <div slot="header" class="item-content">
|
|
|
+ <span>{{ item.key }}</span>
|
|
|
+ <div class="action-buttons" >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ class="drag-handle">
|
|
|
+ <i class="el-icon-rank"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ @click.stop="editContentItem(tabName, item.key, item.value)">
|
|
|
+ <i class="el-icon-edit"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ @click.stop="deleteContentItem(tabName, item.key)">
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-content" >
|
|
|
+<!-- 内容第一行，不能换行，用css控制，多余的隐藏-->
|
|
|
+ <span>{{ item.value }}</span>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </draggable>
|
|
|
+
|
|
|
+ <div v-if="!readOnly">
|
|
|
+ <!-- 添加内容项 -->
|
|
|
+ <div class="add-item" >
|
|
|
+ <el-input
|
|
|
+ v-model="newItemKey[activeTab]"
|
|
|
+ placeholder="键名"
|
|
|
+ style="width: 200px; margin-right: 10px;"></el-input>
|
|
|
+ <el-input
|
|
|
+ v-model="newItemValue[activeTab]"
|
|
|
+ placeholder="键值"
|
|
|
+ style="width: 200px; margin-right: 10px;"></el-input>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="addContentItem(activeTab)"
|
|
|
+ :disabled="!newItemKey[activeTab] || !newItemValue[activeTab]">
|
|
|
+ 添加内容项
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ <!-- 删除当前标签页 -->
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ @click="deleteTab(activeTab)">
|
|
|
+ 删除当前标签页
|
|
|
+ </el-button>
|
|
|
+ <!-- 修改当前标签名-->
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="editTabName(activeTab)">
|
|
|
+ 修改当前标签名
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <br>
|
|
|
+
|
|
|
+ <!-- 添加新标签页 -->
|
|
|
+ <div class="add-tab" v-if="!readOnly">
|
|
|
+ <el-input
|
|
|
+ v-model="newTabName"
|
|
|
+ placeholder="新标签页名称"
|
|
|
+ style="width: 200px; margin-right: 10px;"></el-input>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="addTab"
|
|
|
+ :disabled="!newTabName || myObj[newTabName]">
|
|
|
+ 添加标签页
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-tabs>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // let all_data = {};
|
|
|
+ let pageManager = new PageManager();
|
|
|
+ pageManager.type='copy-page';
|
|
|
+
|
|
|
+ pageManager.setNameCallBack(() => {
|
|
|
+ let title = localStorage.getItem("title");
|
|
|
+ document.title = title + " - 问答";
|
|
|
+ _this.all_data.title = title;
|
|
|
+ })
|
|
|
+
|
|
|
+ let _this = new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ all_data:{},
|
|
|
+ activeTab: 'tab1',
|
|
|
+ myObj: {
|
|
|
+ "tab1": [
|
|
|
+ {key: "ab1", value: "value1"},
|
|
|
+ {key: "ab2", value: "value2"},
|
|
|
+ {key: "ab3", value: "value3"}
|
|
|
+ ],
|
|
|
+ "tab2": [
|
|
|
+ {key: "ab1", value: "value4"},
|
|
|
+ {key: "ab2", value: "value5"}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ newTabName: '',
|
|
|
+ newItemKey: {},
|
|
|
+ newItemValue: {},
|
|
|
+ editingItem: null,
|
|
|
+ editingKey: '',
|
|
|
+ readOnly: false,
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ pageManager.init().then(res => {
|
|
|
+ this.all_data = res;
|
|
|
+ console.log(res)
|
|
|
+ if (res && res.content) {
|
|
|
+ // 初始化数据
|
|
|
+ let showContent = res.content;
|
|
|
+ if (pageManager.isBackup){
|
|
|
+ // 如果是备份
|
|
|
+ showContent = res.content_back;
|
|
|
+ }
|
|
|
+ this.myObj = JSON.parse(showContent);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (pageManager.isReadOnly()) {
|
|
|
+ // 备份页面或分享页面，设置为只读
|
|
|
+ this.readOnly = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ updateData() {
|
|
|
+ this.all_data.content = JSON.stringify(this.myObj);
|
|
|
+ pageManager.updateData(this.all_data);
|
|
|
+ },
|
|
|
+ editTabName(activeTab) {
|
|
|
+ // 先获取当前标签名，弹框提醒用户更改
|
|
|
+ this.$prompt('请输入新的标签名', '修改标签名', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ inputValue: activeTab
|
|
|
+ })
|
|
|
+ .then(({value}) => {
|
|
|
+ // 确认更改后，更新标签名, 让vue监听到，使用 this.$set 方法
|
|
|
+ this.$set(this.myObj, value, this.myObj[activeTab]);
|
|
|
+ delete this.myObj[activeTab];
|
|
|
+ this.activeTab = value;
|
|
|
+ _this.updateData();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deleteTab(activeTab) {
|
|
|
+ if (this.myObj[activeTab]) {
|
|
|
+ this.$confirm('确定删除该标签页？', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ delete this.myObj[activeTab];
|
|
|
+ this.activeTab = Object.keys(this.myObj)[0] || '';
|
|
|
+ _this.updateData();
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleTabClick(tab) {
|
|
|
+ this.activeTab = tab.name;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加标签页
|
|
|
+ addTab() {
|
|
|
+ if (!this.newTabName || this.myObj[this.newTabName]) return;
|
|
|
+ this.myObj[this.newTabName] = [];
|
|
|
+ this.activeTab = this.newTabName;
|
|
|
+ this.newTabName = '';
|
|
|
+ _this.updateData();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除标签页（需确认）
|
|
|
+ deleteTab(tabName) {
|
|
|
+ this.$confirm('确定删除该标签页？', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ delete this.myObj[tabName];
|
|
|
+ this.activeTab = Object.keys(this.myObj)[0] || '';
|
|
|
+ _this.updateData();
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加内容项
|
|
|
+ addContentItem(tabName) {
|
|
|
+ const key = this.newItemKey[tabName];
|
|
|
+ const value = this.newItemValue[tabName];
|
|
|
+ if (!key || !value) return;
|
|
|
+ this.myObj[tabName].push({key, value});
|
|
|
+ this.newItemKey[tabName] = '';
|
|
|
+ this.newItemValue[tabName] = '';
|
|
|
+ _this.updateData();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除内容项
|
|
|
+ deleteContentItem(tabName, key) {
|
|
|
+ this.$confirm('确定删除该内容项？', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.myObj[tabName] = this.myObj[tabName].filter(item => item.key !== key);
|
|
|
+ this.$message({message: '删除成功', type: 'success'});
|
|
|
+ _this.updateData();
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ editContentItem(tabName, key, value) {
|
|
|
+ this.editingItem = { tabName, key, value };
|
|
|
+ this.editingKey = key;
|
|
|
+
|
|
|
+ // 保存原始值用于回滚
|
|
|
+ const originalKey = key;
|
|
|
+ const originalValue = value;
|
|
|
+
|
|
|
+ // 第一步：修改Key
|
|
|
+ this.$prompt('修改Key', '编辑内容', {
|
|
|
+ confirmButtonText: '保存',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ inputPlaceholder: '输入新Key',
|
|
|
+ inputValue: key
|
|
|
+ }).then(({ value: newKey }) => {
|
|
|
+ // 第二步：修改Value
|
|
|
+ return this.$prompt('修改值', '编辑内容', {
|
|
|
+ confirmButtonText: '保存',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ inputPlaceholder: '输入新值',
|
|
|
+ inputValue: value
|
|
|
+ }).then(({ value: newValue }) => {
|
|
|
+ // 更新数据
|
|
|
+ const items = this.myObj[tabName];
|
|
|
+ const itemIndex = items.findIndex(item => item.key === originalKey);
|
|
|
+ if (itemIndex !== -1) {
|
|
|
+ items[itemIndex].key = newKey;
|
|
|
+ items[itemIndex].value = newValue;
|
|
|
+ }
|
|
|
+ this.updateData();
|
|
|
+ this.editingItem = null;
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ // 如果任一步骤取消，重置状态
|
|
|
+ this.editingItem = null;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 复制到剪贴板
|
|
|
+ copyToClipboard(text) {
|
|
|
+ const clipboard = new ClipboardJS('.dummy', {
|
|
|
+ text: () => text
|
|
|
+ });
|
|
|
+
|
|
|
+ clipboard.on('success', () => {
|
|
|
+ this.$message({message: '复制成功', type: 'success'});
|
|
|
+ clipboard.destroy();
|
|
|
+ });
|
|
|
+
|
|
|
+ clipboard.on('error', () => {
|
|
|
+ this.$message({message: '复制失败', type: 'error'});
|
|
|
+ clipboard.destroy();
|
|
|
+ });
|
|
|
+
|
|
|
+ const dummy = document.createElement('button');
|
|
|
+ dummy.className = 'dummy';
|
|
|
+ document.body.appendChild(dummy);
|
|
|
+ dummy.click();
|
|
|
+ document.body.removeChild(dummy);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 拖拽排序事件
|
|
|
+ onDragChange(tabName) {
|
|
|
+ console.log(`拖拽后 ${tabName} 的顺序:`, this.myObj[tabName]);
|
|
|
+ this.$message({message: '排序已更新', type: 'success'});
|
|
|
+ _this.updateData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
tianyun