tianyunperfect
/
web-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>excalidraw_all</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/login.js"></script>
    <script src="js/util.js"></script>
    <script src="js/vue3.global.prod.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div id="nameList">
        <span v-for="name in names" :key="name.id" style="margin-right: 1.5em;min-width: 5em">
            <a  href="#" @click.prevent="loadList(name.id)">
            {{ name.name }} - ({{ name.count }})
        </a>
        </span>

    </div>
    <ul id="list">
        <li v-for="item in listItems" :key="item.id">
            <a :href="getUrl(item)" target="_blank">{{ item.name }}_{{ item.version }}</a>
            &nbsp;&nbsp;&nbsp;
            <button @click="confirmDelete(item.id, item.version)">删除</button>
        </li>
    </ul>
</div>

<script>
    const { createApp, ref, onMounted } = Vue;

    createApp({
        setup() {
            const names = ref([]);
            const listItems = ref([]);
            const currentId = ref(null);
            if (!checkLogin()) {
                return;
            }

            const loadNames = async () => {
                try {
                    const response = await axios.get('https://php.tianyunperfect.cn/controller/excalidraw.php?action=getAllName');
                    if (response.data.code === 200) {
                        names.value = response.data.data;
                    } else {
                        alert(response.data.message);
                    }
                } catch (error) {
                    console.error('加载名称列表失败', error);
                    alert('加载名称列表失败');
                }
            };

            const loadList = async (id) => {
                currentId.value = id;
                try {
                    const response = await axios.get(`https://php.tianyunperfect.cn/controller/excalidraw.php?action=get_by_id&id=${id}`);
                    if (response.data.code === 200) {
                        listItems.value = response.data.data;
                        // 如果没有数据，就根据id，重新加载名称列表
                        if (listItems.value.length === 0) {
                            await loadNames();
                        }
                    } else {
                        alert(response.data.message);
                    }

                } catch (error) {
                    console.error('加载列表失败', error);
                    alert('加载列表失败');
                }
            };

            const getUrl = (item) => {
                return `https://excalidraw.tianyunperfect.cn/?a=${item.id}&version=${item.version}`;
            };

            const confirmDelete = (id, version) => {
                if (confirm('确认要删除吗？')) {
                    deleteData(id, version);
                }
            };

            const deleteData = async (id, version) => {
                try {
                    const response = await axios.delete(`https://php.tianyunperfect.cn/controller/excalidraw.php?action=delete&id=${id}&version=${version}`);
                    if (response.data.code === 200) {
                        loadList(currentId.value);
                    } else {
                        alert(response.data.message);
                    }
                } catch (error) {
                    console.error('删除失败', error);
                    alert('删除失败');
                }
            };

            onMounted(() => {
                if (!checkLogin()) {
                    return;
                }
                const urlParams = new URLSearchParams(window.location.search);
                const idParam = urlParams.get('id');
                if (idParam) {
                    loadList(idParam);
                } else {
                    loadNames();
                }
            });

            return {
                names,
                listItems,
                loadList,
                getUrl,
                confirmDelete
            };
        }
    }).mount('#app');
</script>
</body>
</html>