2222

2025-09-09 11:12:02 +08:00
parent c171a90ad6
commit 27cc128f6e
3 changed files with 122 additions and 32 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NAS IPV6查询</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            text-decoration: none;
+        }
+
+        #app {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+
+        .ipv6 {
+            display: flex;
+            flex-direction: column;
+
+            li {
+                font-size: 16px;
+
+                cursor: pointer;
+
+
+                .address {
+                    display: flex;
+                    align-items: center;
+                }
+
+                &:first-child {
+                    &::before {
+                        content: "公网地址:";
+                        margin-bottom: 5px;
+                        display: inline-block;
+                        font-weight: 600;
+                    }
+                }
+
+                &:last-child {
+                    margin-top: 20px;
+
+                    &:before {
+                        content: "局域网地址:";
+                        margin-bottom: 5px;
+                        display: inline-block;
+                        font-weight: 600;
+                    }
+                }
+            }
+
+            .connect {
+                width: 12px;
+                height: 12px;
+                border-radius: 100%;
+                background: #b8b6b6;
+                margin-right: 8px;
+            }
+
+            .active {
+                background: rgb(8 251 134);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <ul class="ipv6">
+            <li title="点击复制" v-for="item,index in ipv6List" :key="index" @click="copyToClipboard(item.address)">
+                <div class="address">
+                    <div class="connect" :class="{ active: item.connect }"></div>
+                    {{ item.address }}
+                </div>
+            </li>
+        </ul>
+    </div>
+</body>
+<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.11.0/axios.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.7/vue.min.js"></script>
+<script>
+
+    new Vue({
+        el: "#app",
+        data: {
+            ipv6List: []
+        },
+        async mounted() {
+            let res = await this.getIp()
+            this.ipv6List = res.ipv6Addresses
+            console.log(this.ipv6List);
+        },
+        methods: {
+            async getIp() {
+                let { data } = await axios.get('http://192.168.31.100:9900/ip');
+                return data
+            },
+            async copyToClipboard(text) {
+                return await navigator.clipboard.writeText(text)
+            }
+        },
+    })
+
+</script>
+
+</html>