|
|
@@ -6,86 +6,120 @@
|
|
|
<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="nameList"></div>
|
|
|
-<ul id="list"></ul>
|
|
|
+<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>
|
|
|
+
|
|
|
+ <button @click="confirmDelete(item.id, item.version)">删除</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+</div>
|
|
|
+
|
|
|
<script>
|
|
|
- $(function () {
|
|
|
- if (!checkLogin()) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let urlParams = new URLSearchParams(window.location.search);
|
|
|
- let idParam = urlParams.get('id');
|
|
|
- if (idParam) {
|
|
|
- loadList(idParam);
|
|
|
- } else {
|
|
|
- $.getJSON('https://php.tianyunperfect.cn/controller/excalidraw.php?action=getAllName', function (result) {
|
|
|
- if (result.code === 200) {
|
|
|
- let names = result.data;
|
|
|
- let nameListHtml = '';
|
|
|
- for (let i = 0; i < names.length; i++) {
|
|
|
- nameListHtml += `<a href="?id=${names[i].id}">${names[i].name} - (${names[i].count})</a>`;
|
|
|
- if (i < names.length - 1) {
|
|
|
- nameListHtml += ' | ';
|
|
|
- }
|
|
|
+ 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);
|
|
|
}
|
|
|
- $('#nameList').html(nameListHtml);
|
|
|
- $('#nameList a').click(function (e) {
|
|
|
- e.preventDefault();
|
|
|
- let id = $(this).attr('href').split('=')[1];
|
|
|
- loadList(id);
|
|
|
- });
|
|
|
- } else {
|
|
|
- alert(result.message);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载名称列表失败', error);
|
|
|
+ alert('加载名称列表失败');
|
|
|
}
|
|
|
- });
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
- function loadList(id) {
|
|
|
- $.getJSON('https://php.tianyunperfect.cn/controller/excalidraw.php?action=get_by_id&id=' + id, function (result) {
|
|
|
- if (result.code === 200) {
|
|
|
- let data = result.data;
|
|
|
- let listHtml = '';
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- let a = data[i].id;
|
|
|
- let title = data[i].name;
|
|
|
- let version = data[i].version;
|
|
|
- let url = 'https://excalidraw.tianyunperfect.cn/?a=' + a + '&version=' + version;
|
|
|
- listHtml += '<li><a href="' + url + '" target="_blank">' + title + '_' + version + '</a> <button class="delete-btn" data-id="' + a + '" data-version="' + version + '">删除</button></li>';
|
|
|
+ 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);
|
|
|
}
|
|
|
- $('#list').html(listHtml);
|
|
|
|
|
|
- $('.delete-btn').click(function () {
|
|
|
- if (confirm('确认要删除吗？')) {
|
|
|
- let id = $(this).data('id');
|
|
|
- let version = $(this).data('version');
|
|
|
- deleteData(id, version);
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- alert(result.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);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- function deleteData(id, version) {
|
|
|
- $.ajax({
|
|
|
- url: 'https://php.tianyunperfect.cn/controller/excalidraw.php?action=delete&id=' + id + '&version=' + version,
|
|
|
- type: 'DELETE',
|
|
|
- success: function (result) {
|
|
|
- if (result.code === 200) {
|
|
|
- loadList(id);
|
|
|
+ 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(result.message);
|
|
|
+ alert(response.data.message);
|
|
|
}
|
|
|
- },
|
|
|
- error: function () {
|
|
|
+ } 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>
|
tianyun