tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <!--解决资源跨域-->
    <meta name="referrer" content="no-referrer"/>

    <!--解决缓存问题-->
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="0"/>

    <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: 380px;
            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%;
            }
        }

        /* 原有样式保留，新增以下样式 */
        .link-section {
            margin: 8px 0;
        }

        .extra-links {
            margin-top: 8px;
        }

        .extra-link-tag {
            margin: 2px;
            padding: 0 5px;
        }

        .item-description {
            color: #666;
            font-size: 12px;
            margin-bottom: 8px;
        }

        .screenshot-section {
            border-top: 1px solid #eee;
            margin-top: 8px;
            padding-top: 8px;
        }

        .edit-dialog .el-dialog__body {
            padding: 20px;
        }

        .dynamic-delete-button {
            cursor: pointer;
            color: #F56C6C;
        }
    </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="index"
                            class="content-item">
                        <el-card shadow="hover" class="item-card">
                            <div slot="header" class="item-content">
                                <el-image
                                        :src="item.icon"
                                        style="width: 20px; height: 20px; margin-right: 8px;"
                                        fit="contain"
                                ></el-image>
                                <span>{{ item.title }}</span>
                                <div class="action-buttons">
                                    <div v-if="!readOnly">
                                        <el-button type="text" class="drag-handle">
                                            <i class="el-icon-rank"></i>
                                        </el-button>
                                        <el-button
                                                type="text"
                                                @click.stop="openEditDialog(tabName, index)">
                                            <i class="el-icon-edit"></i>
                                        </el-button>
                                        <el-button
                                                type="text"
                                                @click.stop="deleteContentItem(tabName, index)">
                                            <i class="el-icon-delete"></i>
                                        </el-button>
                                    </div>

                                </div>
                            </div>
                            <div class="item-content">
                                <div style="width: 100%">
                                    <div class="item-description">{{ item.description || item.title }}</div>
                                    <el-tooltip>
                                        <div class="link-section">
                                            <el-link
                                                    type="primary"
                                                    :href="item.mainUrl"
                                                    target="_blank">{{ item.mainUrl }}
                                            </el-link>
                                        </div>
                                        <div slot="content" v-if="item.extraUrls && item.extraUrls.length" class="extra-links">
                                            <el-tag
                                                    v-for="(url, idx) in item.extraUrls"
                                                    :key="idx"
                                                    type="info"
                                                    class="extra-link-tag">
                                                <el-link :href="url" target="_blank">{{ url }}</el-link>
                                            </el-tag>
                                        </div>
                                        <div slot="content" v-else>
                                            没有更多链接
                                        </div>
                                    </el-tooltip>


                                    <div v-if="item.screenshot" class="screenshot-section">
                                        <el-image
                                                :src="item.screenshot"
                                                style="max-width: 100%; height: 220px;"
                                                :preview-src-list="[item.screenshot]"
                                                fit="cover"></el-image>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </draggable>

                <!-- 添加新项部分 -->
                <div v-if="!readOnly">
                    <el-button type="primary" @click="openAddDialog">添加新项</el-button>
                    <el-button @click="showTabManage = !showTabManage">
                        {{ showTabManage ? '隐藏标签管理' : '显示标签管理' }}
                    </el-button>

                    <!-- 标签管理 -->
                    <!-- 标签管理部分 -->
                    <div v-if="showTabManage" style="margin-top: 20px;">
                        <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>
                        <el-button
                                type="warning"
                                @click="editCurrentTabName"
                                :disabled="!activeTab">
                            修改当前标签名
                        </el-button>
                        <el-button
                                type="danger"
                                @click="deleteTab(activeTab)"
                                :disabled="Object.keys(myObj).length <= 1">
                            删除当前标签
                        </el-button>
                    </div>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>
    <br>
    <div v-if="showTabManage">
        <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="isEditing ? '编辑项目' : '添加新项'"
            :visible.sync="dialogVisible"
            width="600px">
        <el-form :model="currentItem" label-width="80px">
            <el-form-item label="标题">
                <el-input v-model="currentItem.title"></el-input>
            </el-form-item>
            <el-form-item label="图标URL">
                <el-input v-model="currentItem.icon"></el-input>
            </el-form-item>
            <el-form-item label="主地址">
                <el-input v-model="currentItem.mainUrl"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="currentItem.description" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="附加地址">
                <div v-for="(url, index) in currentItem.extraUrls" :key="index">
                    <el-input v-model="currentItem.extraUrls[index]" style="margin-bottom: 5px;">
                        <el-button
                                slot="append"
                                icon="el-icon-remove"
                                @click="removeExtraUrl(index)"></el-button>
                    </el-input>
                </div>
                <el-button @click="addExtraUrl">添加附加地址</el-button>
            </el-form-item>
            <el-form-item label="截图URL">
                <el-input v-model="currentItem.screenshot"></el-input>
            </el-form-item>
            <el-form-item label="所属标签">
                <el-select v-model="targetTab" placeholder="请选择标签页">
                    <el-option
                            v-for="tab in Object.keys(myObj)"
                            :key="tab"
                            :label="tab"
                            :value="tab">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveItem">确 定</el-button>
        </span>
    </el-dialog>
</div>

<script>
    let pageManager = new PageManager();
    pageManager.type = 'nav-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: {
                "常用工具": [{
                    title: "GitHub",
                    icon: "https://github.githubassets.com/favicons/favicon.svg",
                    mainUrl: "https://github.com",
                    description: "代码托管平台",
                    extraUrls: [
                        "https://gist.github.com",
                        "https://pages.github.com"
                    ],
                    screenshot: ""
                }]
            },
            newTabName: '',
            readOnly: false,
            showTabManage: false,
            // 对话框相关
            dialogVisible: false,
            isEditing: false,
            currentItem: {
                title: '',
                icon: '',
                mainUrl: '',
                description: '',
                extraUrls: [],
                screenshot: ''
            },
            originalTab: '',
            originalIndex: -1,
            targetTab: ''
        },
        mounted() {
            pageManager.init().then(res => {
                this.all_data = res;
                if (res && res.content) {
                    let showContent = res.content;
                    if (pageManager.isBackup) showContent = res.content_back;
                    this.myObj = JSON.parse(showContent);
                }
                this.activeTab = Object.keys(this.myObj)[0] || '';
                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();
                            })
                        }
                    })
                });
            },
            editCurrentTabName() {
                this.$prompt('请输入新标签名', '修改标签名称', {
                    inputValue: this.activeTab,
                    closeOnClickModal: false,
                    inputValidator: (value) => {
                        if (!value) return '标签名不能为空';
                        if (this.myObj[value] && value !== this.activeTab) return '标签名已存在';
                        return true;
                    }
                }).then(({value}) => {
                    if (value !== this.activeTab) {
                        // 创建新标签并转移数据
                        this.$set(this.myObj, value, this.myObj[this.activeTab]);
                        delete this.myObj[this.activeTab];
                        this.activeTab = value;
                        this.updateData();
                    }
                }).catch(() => {
                });
            },
            openAddDialog() {
                this.isEditing = false;
                this.currentItem = {
                    title: '',
                    icon: '',
                    mainUrl: '',
                    description: '',
                    extraUrls: [],
                    screenshot: ''
                };
                this.targetTab = this.activeTab;
                this.dialogVisible = true;
            },

            openEditDialog(tabName, index) {
                this.isEditing = true;
                this.originalTab = tabName;
                this.originalIndex = index;
                this.currentItem = JSON.parse(JSON.stringify(this.myObj[tabName][index]));
                this.targetTab = tabName;
                this.dialogVisible = true;
            },

            saveItem() {
                if (!this.currentItem.title || !this.currentItem.mainUrl) {
                    this.$message.warning('标题和主地址为必填项');
                    return;
                }

                // 删除原有项（编辑时）
                if (this.isEditing) {
                    this.myObj[this.originalTab].splice(this.originalIndex, 1);
                }

                // 添加到目标标签
                if (!this.myObj[this.targetTab]) this.myObj[this.targetTab] = [];
                this.myObj[this.targetTab].push(this.currentItem);

                this.updateData();
                this.dialogVisible = false;
            },

            addExtraUrl() {
                this.currentItem.extraUrls.push('');
            },

            removeExtraUrl(index) {
                this.currentItem.extraUrls.splice(index, 1);
            },

            addTab() {
                if (!this.newTabName) return;
                this.$set(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();
                });
            },

            deleteContentItem(tabName, index) {
                this.$confirm('确定删除该项？', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.myObj[tabName].splice(index, 1);
                    this.updateData();
                });
            },

            updateData() {
                this.all_data.content = JSON.stringify(this.myObj);
                pageManager.updateData(this.all_data);
            },

            onDragChange(tabName) {
                this.updateData();
            },

            handleTabClick(tab) {
                this.activeTab = tab.name;
            }
        }
    });
</script>
</body>
</html>