添加wss登录

src/components/Header/index.vue

@@ -67,7 +67,7 @@ const ThemeChange = (val: string | number | boolean) => {
                   </li>
                   <li>
                     <router-link
-                      to="/"
+                      to="/login"
                       class="hover:text-sky-500 dark:hover:text-sky-400"
                     >Login</router-link>
                   </li>

src/pages/login/index.vue

@@ -1,3 +1,59 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import Header from '@/components/Header/index.vue'
+import commuse from './components/commuse.vue'
+import { useWebSocket } from '@vueuse/core'
+
+var wss = ref('')
+
+function login() {
+  const { status, data, send, open, close } = useWebSocket(wss.value)
+}
+</script>
 <template>
-    <h1>未开发</h1>
-</template>
+  <Header />
+  <div class="cont">
+    <div class="title">
+      启用插件
+      <a
+        href="https://github.com/liujiaqi7998/GrasscuttersWebDashboard"
+        target="_blank"
+        rel="noopener noreferrer"
+        >GrasscuttersWebDashboard</a
+      >
+    </div>
+    <div>
+      <div class="commuse-item">
+        <div class="text-slate-900 dark:text-slate-100"> wss: </div>
+        <n-input v-model:value="wss" clearable placeholder="请从控制台获取" />
+      </div>
+      <div class="title">
+        <n-button type="tertiary" @click="login"> 登录 </n-button>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="less" scoped>
+.cont {
+  width: 800px;
+  margin: auto;
+  margin-top: 40px;
+  .title {
+    text-align: center;
+  }
+  .commuse-item {
+    display: flex;
+    align-items: center;
+    color: #000;
+    margin: 18px 0;
+
+    > div {
+      &:nth-child(1) {
+        width: 150px;
+        text-align: right;
+        padding-right: 10px;
+      }
+    }
+  }
+}
+</style>

src/pages/start/components/commuse.vue

@@ -6,111 +6,100 @@ import { useMessage } from 'naive-ui'
 
 const { text, isSupported, copy } = useClipboard()
 
-
-
-
 var value2 = ref(223)
-var uid = ref("")
+var uid = ref('')
 var num = ref(1000)
 
 const value = computed(() => {
   return `/give ${uid.value} ${value2.value} ${num.value}`
 })
-const options = reactive(
-  [
-    {
-      "label": "角色经验",
-      "value": 101
-    },
-    {
-      "label": "冒险阅历",
-      "value": 102
-    },
-    {
-      label: "原石",
-      value: 201,
-    },
-    {
-      label: "摩拉",
-      value: 202,
-    },
-    {
-      label: "创世结晶",
-      value: 203,
-    },
-    {
-      label: "洞天宝钱",
-      value: 204,
-    },
-    {
-      label: "无主的星辉",
-      value: 221,
-    },
-    {
-      label: "无主的星尘",
-      value: 222,
-    },
-    {
-      label: "纠缠之缘",
-      value: 223,
-    },
-    {
-      label: "相遇之缘",
-      value: 224,
-    }
-  ]
-)
+const options = reactive([
+  {
+    label: '角色经验',
+    value: 101,
+  },
+  {
+    label: '冒险阅历',
+    value: 102,
+  },
+  {
+    label: '原石',
+    value: 201,
+  },
+  {
+    label: '摩拉',
+    value: 202,
+  },
+  {
+    label: '创世结晶',
+    value: 203,
+  },
+  {
+    label: '洞天宝钱',
+    value: 204,
+  },
+  {
+    label: '无主的星辉',
+    value: 221,
+  },
+  {
+    label: '无主的星尘',
+    value: 222,
+  },
+  {
+    label: '纠缠之缘',
+    value: 223,
+  },
+  {
+    label: '相遇之缘',
+    value: 224,
+  },
+])
 const message = useMessage()
 function copyvalue() {
   copy(value.value)
   if (isSupported) {
-    message.success(
-      `已复制${value.value}`
-    )
+    message.success(`已复制${value.value}`)
   }
-
 }
-
-
 </script>
 
 <template>
-
   <div class="commuse">
     <div class="commuse-item">
-      <div class="text-slate-900 dark:text-slate-100">
-        UID:
-      </div>
-      <n-input v-model:value="uid" type="text" placeholder="" />
+      <div class="text-slate-900 dark:text-slate-100"> UID: </div>
+      <a-input v-model="uid" placeholder="请输入UID" allow-clear />
     </div>
 
     <div class="commuse-item">
-      <div class="text-slate-900 dark:text-slate-100">
-        物品:
-      </div>
-      <n-select filterable v-model:value="value2" :options="options" />
+      <div class="text-slate-900 dark:text-slate-100"> 物品: </div>
+      <a-cascader
+        allow-search
+        v-model="value2"
+        :options="options"
+        placeholder="请输入物品"
+        filterable
+      />
     </div>
 
     <div class="commuse-item">
-      <div class="text-slate-900 dark:text-slate-100">
-        数量:
-      </div>
-      <n-input-number v-model:value="num" clearable />
+      <div class="text-slate-900 dark:text-slate-100"> 数量: </div>
+      <a-input-number
+        v-model="num"
+        placeholder="请输入数量"
+        mode="button"
+        size="large"
+        class="input-demo"
+      />
     </div>
     <div class="generate">
-      <n-input id="input" v-model:value="value" type="text" placeholder="" />
-      <n-button type="tertiary" @click="copyvalue">
-        复制
-      </n-button>
+      <a-input v-model="value" placeholder="请输入UID" />
+      <a-button type="outline" @click="copyvalue">复制</a-button>
+      <!-- <a-button type="outline" @click="copyvalue">执行</a-button> -->
     </div>
-
-
-  </div>
-
-  <div>
-
   </div>
 
+  <div> </div>
 </template>
 <style lang="less" scoped>
 .commuse {
@@ -124,7 +113,7 @@ function copyvalue() {
   color: #000;
   margin: 18px 0;
 
-  >div {
+  > div {
     &:nth-child(1) {
       width: 150px;
       text-align: right;