tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649
							<!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>
        /* 新增样式 */
        .group-title {
            /*padding: 20px 0 10px;*/
            font-size: 20px;
            font-weight: bold;
            color: #409EFF;
            border-bottom: 1px solid #c7daf5;
            margin: 20px 0;
            display: flex;
            align-items: center;
        }

        .group-title i {
            margin-right: 8px;
        }

        .tab-sort-bar {
            background: #fdfdfd;
            /*padding: 10px;*/
            margin-bottom: 10px;
            border-radius: 4px;
            /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
        /*    固定在顶部*/
            position: fixed;
            top: 0;
            padding: 5px;

        }

        .tab-item {
            min-width: 100px;
            max-width: 200px;
            /*    文字居中*/
            text-align: center;
            /*文字垂直居中*/
            /*line-height: 2em;*/
            background: #ecf5f0;
            margin: 0 10px;
            /*    鼠标变成手*/
            cursor: pointer;
        /*    圆角*/
            border-radius: 4px;
        }

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

        .tab-container {
            max-width: calc(80%);
            margin: 0 auto;
            padding: 20px;
        }

        .tab-content {
            margin-top: 20px;
        }

        .content-item {
            margin: 10px;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            transition: all .3s;
            cursor: pointer;
            display: inline-block;
            width: 300px;
            box-sizing: border-box;
            margin-bottom: 15px;
        }

        .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;
        }

        @media (max-width: 768px) {
            .content-item {
                width: calc(50% - 20px);
            }
        }

        @media (max-width: 480px) {
            .content-item {
                width: 100%;
            }
        }

        /* 原有样式保留，新增以下样式 */
        .link-section {
            /*margin: 8px 0;*/
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
        }

        .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;
        }
        .el-card__header{
            padding: 8px 20px;
        }
        .show-hover-class{
            opacity: 0;
        }

    </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">
    <!-- 标签排序栏 -->
        <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>-->
            <div style="margin-right: 20px; margin-left: 5px">{{ group.name }}</div>

            <div class="show-hover-class" v-if="!readOnly" style="display: flex" >
                <!-- 新增按钮 -->
                <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)" >
                    <i class="el-icon-edit"></i>
                </el-button>
                <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)" >
                    新增卡片
                </el-button>
            </div>

        </div>

        <draggable
                group="site"
                animation="300"
                :disabled="readOnly"
                v-model="group.datas"
                tag="div"
                @change="onDragChange(group.name)"
                handle=".drag-handle"
                class="content-list">
            <transition-group>
                <div v-for="(item, index) in group.datas"
                     :key="index"
                     class="content-item">
                    <el-card shadow="hover" class="item-card">
                        <div slot="header" class="item-content drag-handle">
                            <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 show-hover-class">
                                <div v-if="!readOnly">
                                    <el-button
                                            type="text"
                                            @click.stop="openEditDialog(group,item)">
                                        <i class="el-icon-edit"></i>
                                    </el-button>
                                    <el-button
                                            type="text"
                                            @click.stop="deleteContentItem(group.name, index)">
                                        <i class="el-icon-delete"></i>
                                    </el-button>
                                    <el-button
                                            type="text"
                                            @click.stop="addContentItemAfter(group.name, index)">
                                        <i class="el-icon-plus"></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: 175px;"
                                            :preview-src-list="[item.screenshot]"
                                            fit="cover"></el-image>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </transition-group>

        </draggable>
    </div>
    <br>
    <!-- 编辑对话框 -->
    <el-dialog
            :close-on-click-modal="false"
            :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 groups"
                            :key="tab.name"
                            :label="tab.name"
                            :value="tab.name">
                    </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: {
            all_data: {},
            activeTab: '常用工具',
            groups: [
                {
                    name: "常用工具",
                    datas: [{
                        title: "GitHub",
                        icon: "https://github.githubassets.com/favicons/favicon.svg",
                        mainUrl: "https://github.com",
                        description: "代码托管平台",
                        extraUrls: [
                            "",
                            "https://pages.github.com"
                        ],
                        screenshot: ""
                    }]
                }
            ],

            newTabName: '',
            readOnly: false,
            showTabManage: false,
            // 对话框相关
            dialogVisible: false,
            isEditing: false,
            currentItem: {
                title: '',
                icon: '',
                mainUrl: '',
                description: '',
                extraUrls: [],
                screenshot: ''
            },
            originalTab: '',
            originalIndex: -1, // 编辑时，记录原始数据在当前标签页中的索引
            targetTabIndex: -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.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: {
            scrollToGroup(tabName) {
                const element = document.getElementById('group-' + tabName);
                if (element) {
                    element.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            },
            onTabOrderChange() {
                this.updateData();
            },
            openAddDialog() {
                this.isEditing = false;
                this.currentItem = {
                    title: '',
                    icon: '',
                    mainUrl: '',
                    description: '',
                    extraUrls: [],
                    screenshot: ''
                };
                this.targetTab = this.activeTab;
                this.dialogVisible = true;
            },

            openEditDialog(group, item) {
                // 根据 groupName 和 index 获取对应的数据

                this.isEditing = true;
                this.dialogVisible = true;
                this.currentItem = item;
                this.targetTab = group.name;
                this.originalTab = group.name;
            },
            getTabNames() {
                return this.groups.map(g => g.name);
            },
            // 根据标签名获取数据
            getGroupByName(name) {
                return this.groups.find(g => g.name === name);
            },
// 新增标签页
            addTab() {
                if (!this.newTabName) return;

                this.groups.push({
                    name: this.newTabName,
                    datas: []
                });

                this.activeTab = this.newTabName;
                this.newTabName = '';
                this.updateData();
            },

            // 保存新项目
            saveItem() {
                if (!this.currentItem.title || !this.currentItem.mainUrl) {
                    this.$message.warning('标题和主地址为必填项');
                    return;
                }
                const targetGroup = this.getGroupByName(this.targetTab);
                if (!targetGroup) return;
                if (this.isEditing) {
                    // 编辑模式
                    const originalGroup = this.getGroupByName(this.originalTab);
                    if (originalGroup) {
                        originalGroup.datas.splice(this.originalIndex, 1);

                        if (this.targetTab === this.originalTab) {
                            // 同组内移动，插入到原位置
                            targetGroup.datas.splice(this.originalIndex, 0, this.currentItem);
                        } else {
                            // 跨组移动，添加到末尾
                            targetGroup.datas.push(this.currentItem);
                        }
                    }
                } else {
                    // 新增模式
                    if (this.originalIndex !== undefined) {
                        // 在指定位置后插入
                        targetGroup.datas.splice(this.originalIndex + 1, 0, this.currentItem);
                    } else {
                        // 直接添加到末尾
                        targetGroup.datas.push(this.currentItem);
                    }
                }
                this.updateData();
                this.dialogVisible = false;

                // 重置位置信息
                this.originalIndex = undefined;
                this.originalTab = '';
            },


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

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


            // 删除标签页
            deleteTab(name) {
                const idx = this.groups.findIndex(g => g.name === name);
                if (idx > -1) {
                    this.groups.splice(idx, 1);
                    this.activeTab = this.groups[0]?.name;
                    this.updateData();
                }
            },
// 修改标签名
            editCurrentTabName(oldName) {
                this.$prompt('请输入新标签名', '修改标签名称', {
                    inputValue: oldName,
                    closeOnClickModal: false,
                    inputValidator: (value) => {
                        if (!value) return '标签名不能为空';
                        if (this.getGroupByName(value) && value !== oldName) {
                            return '标签名已存在';
                        }
                        return true;
                    }
                }).then(({value}) => {
                    if (value !== oldName) {
                        const group = this.getGroupByName(oldName);
                        if (group) {
                            group.name = value;
                            this.activeTab = value;
                            this.updateData();
                        }
                    }
                });
            },

            // 删除内容项
            deleteContentItem(groupName, index) {
                const group = this.getGroupByName(groupName);
                if (group) {
                    group.datas.splice(index, 1);
                    this.updateData();
                }
            },


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

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

            handleTabClick(tab) {
                this.activeTab = tab.name;
            },
            // 在当前标签后新增标签
            addTabAfter(name) {
                this.$prompt('请输入新标签名', '添加标签名称', {
                    closeOnClickModal: false,
                    inputValidator: (value) => {
                        if (!value) return '标签名不能为空';
                        if (this.getGroupByName(value)) return '标签名已存在';
                        return true;
                    }
                }).then(({value}) => {
                    const idx = this.groups.findIndex(g => g.name === name);
                    this.groups.splice(idx + 1, 0, {
                        name: value,
                        datas: []
                    });
                    this.activeTab = value;
                    this.updateData();
                });
            },

            addContentItemAfter(groupName, index) {
                this.isEditing = false;
                // 重置当前项
                this.currentItem = {
                    title: '',
                    icon: '',
                    mainUrl: '',
                    description: '',
                    extraUrls: [],
                    screenshot: ''
                };

                // 存储目标位置信息
                this.targetTab = groupName;
                this.originalTab = groupName;
                this.originalIndex = index;

                this.dialogVisible = true;
            },
        }
    });
</script>
</body>
</html>