tianyunperfect
/
web-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
							<!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-item {
            min-width: 100px;
            max-width: 200px;
            /*    文字居中*/
            text-align: center;
            /*文字垂直居中*/
            line-height: 2em;
            background: #c5e7cd;
            margin: 0 20px;
            /*    鼠标变成手*/
            cursor: pointer;
        }

        .tab-item:hover {
            background-color: #a3badc;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        }

        .tab-container {
            max-width: 1600px;
            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: 300px;
            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;
        }

        .item-2 {
            /*    禁止换行 - */
            white-space: nowrap;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 超出部分显示省略号 */
            text-overflow: ellipsis;
        }

        .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" type="card" ref="navTabs">
        <el-tab-pane
                v-for="(content, tabName) in myObj"
                :key="tabName"
                :label="tabName"
                :name="tabName"
        >
            <!-- 标签页内容 -->
            <div class="tab-content">
                <!-- 内容项列表 -->
                <draggable
                        :disabled="readOnly"
                        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-2">
                                <el-tooltip :content="item.value">
                                    <span>{{ item.value }}</span>
                                </el-tooltip>

                            </div>
                        </el-card>
                    </div>
                </draggable>

                <div v-if="!readOnly">
                    <el-button
                            type="primary"
                            size="small"

                            @click="addContentItem(activeTab)">
                        添加内容项
                    </el-button>
                    <!-- 新增控制按钮 -->
                    <el-button
                            type="info"
                            size="small"
                            @click="showOptions = !showOptions">
                        {{ showOptions ? '隐藏选项' : '显示选项' }}
                    </el-button>
                    <br/>
                    <br/>
                    <!-- 添加新标签页 -->
                    <div class="add-tab" v-if="!readOnly && showOptions">
                        <el-input
                                v-model="newTabName"
                                size="small"
                                placeholder="新标签页名称"
                                style="width: 200px; margin-right: 10px;"></el-input>
                        <el-button
                                type="primary"
                                size="small"
                                @click="addTab"
                                :disabled="!newTabName || myObj[newTabName]">
                            添加标签页
                        </el-button>
                        <!-- 修改当前标签名 -->
                        <el-button
                                type="primary"
                                size="small"
                                @click="editTabName(activeTab)"
                                v-if="showOptions"> <!-- 使用 v-if 控制显示 -->
                            修改当前标签名
                        </el-button>
                        <!-- 删除当前标签页 -->
                        <el-button
                                type="danger"
                                size="small"
                                @click="deleteTab(activeTab)"
                                v-if="showOptions"> <!-- 使用 v-if 控制显示 -->
                            删除当前标签页
                        </el-button>
                    </div>

                </div>
            </div>
        </el-tab-pane>
        <br>
    </el-tabs>
    <div v-if="!readOnly && showOptions">
        <draggable v-model="tabOrder" @change="onTabOrderChange" handle=".drag-handle" style="display: flex;">
            <div v-for="tabName in tabOrder" :key="tabName" class="tab-item drag-handle">
                <span>{{ tabName }}</span>
            </div>
        </draggable>
    </div>
    <!-- 新增和编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
        <el-form :model="form" label-width="80px">
            <el-form-item label="键名">
                <el-input v-model="form.key" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="键值">
                <el-input v-model="form.value" type="textarea" autosize></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</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: {
            tabOrder: [],
            all_data: {},
            activeTab: '',
            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,
            showOptions: false, // 新增变量控制按钮显示和隐藏
            dialogVisible: false,
            dialogTitle: '',
            form: {
                key: '',
                value: ''
            },
            currentTabName: '',
            currentKey: ''
        },
        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);
                }
                // 设置activeTab
                this.activeTab = this.get_init_activeTab();

                if (pageManager.isReadOnly()) {
                    // 备份页面或分享页面，设置为只读
                    this.readOnly = true;
                }

                this.mouseOver();
                this.tabOrder = Object.keys(this.myObj);
            });
        },
        methods: {
            onTabOrderChange() {
                const newMyObj = {};
                this.tabOrder.forEach(tabName => {
                    newMyObj[tabName] = this.myObj[tabName];
                });
                this.myObj = newMyObj;
                this.updateData();
            },
            // 鼠标滑过，切换tabs
            mouseOver() {
                this.$nextTick(() => {
                    this.$refs.navTabs.$refs.nav.$nextTick(() => {
                        // console.log('$refs.nav', this.$refs.navTabs.$refs.nav.$el)
                        // 此时tab的nav才渲染dom 否则拿不到el-tabs__item
                        const target = document.getElementsByClassName('el-tabs__item')
                        for (let i = 0; i < target.length; i++) {
                            target[i].addEventListener('mouseover', () => {
                                target[i].click();
                            })
                        }
                    })
                });
            },
            // 获取初始化activeTab
            get_init_activeTab() {
                return sessionStorage.getItem("tab-" + pageManager.id) || Object.keys(this.myObj)[0] || '';
            },
            updateData() {
                this.all_data.content = JSON.stringify(this.myObj);
                pageManager.updateData(this.all_data);
            },
            editTabName(activeTab) {
                // 先获取当前标签名，弹框提醒用户更改
                this.$prompt('请输入新的标签名', '修改标签名', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false,
                    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;
                // 保存到本地 localStorage
                sessionStorage.setItem("tab-" + pageManager.id, this.activeTab);
            },

            // 添加标签页
            addTab() {
                if (!this.newTabName || this.myObj[this.newTabName]) return;
                this.myObj[this.newTabName] = [];
                this.activeTab = this.newTabName;
                this.newTabName = '';
                _this.tabOrder = Object.keys(this.myObj);
                _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) {
                this.dialogTitle = '新增内容项';
                this.currentTabName = tabName;
                this.form.key = '';
                this.form.value = '';
                this.dialogVisible = true;
            },

            editContentItem(tabName, key, value) {
                this.dialogTitle = '编辑内容项';
                this.currentTabName = tabName;
                this.currentKey = key;
                this.form.key = key;
                this.form.value = value;
                this.dialogVisible = true;
            },

            submitForm() {
                if (this.dialogTitle === '新增内容项') {
                    this.myObj[this.currentTabName].push({key: this.form.key, value: this.form.value});
                } else if (this.dialogTitle === '编辑内容项') {
                    const items = this.myObj[this.currentTabName];
                    const itemIndex = items.findIndex(item => item.key === this.currentKey);
                    if (itemIndex !== -1) {
                        items[itemIndex].key = this.form.key;
                        items[itemIndex].value = this.form.value;
                    }
                }
                this.dialogVisible = false;
                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(() => {
                });
            },

            // 复制到剪贴板
            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>