From 2c704a1d146f1414ddf61d0f1b54a67d49e989a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E5=88=BA=E8=9E=88?= <i@songe.li>
Date: Wed, 1 Jan 2025 23:30:01 +0800
Subject: [PATCH] feat: SelectorPage

---
 src/App.vue                | 10 ++++++----
 src/utils/others.ts        | 16 ++++++++++++----
 src/views/SelectorPage.vue | 16 ++++++++++------
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4c561a0..76e3479 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,16 +21,18 @@ $winMinHeight: 700px;
 }
 
 body {
-  &:not(.mobile) {
-    width: var(--gkd-w);
+  width: var(--gkd-w);
+  &.body-auto-w {
+    --gkd-w: 100vw;
   }
 }
 
 #app {
   display: flex;
   flex-direction: column;
-  &:not(.app-auto-h) {
-    height: var(--gkd-h);
+  height: var(--gkd-h);
+  &.app-auto-h {
+    --gkd-h: auto;
   }
 }
 .gkd_code,
diff --git a/src/utils/others.ts b/src/utils/others.ts
index dabe328..ba64bb8 100644
--- a/src/utils/others.ts
+++ b/src/utils/others.ts
@@ -66,16 +66,24 @@ export const copy = (() => {
   };
 })();
 
-export const useAutoHeight = () => {
-  const cls = 'app-auto-h';
+const useAutoCls = (el: Element, cls: string) => {
+  el.classList.add(cls);
   onMounted(() => {
-    root.classList.add(cls);
+    el.classList.add(cls);
   });
   onUnmounted(() => {
-    root.classList.remove(cls);
+    el.classList.remove(cls);
   });
 };
 
+export const useAutoHeight = () => {
+  useAutoCls(root, 'app-auto-h');
+};
+
+export const useAutoWidth = () => {
+  useAutoCls(document.body, 'body-auto-w');
+};
+
 export const timeAgo = (date: number) => {
   const seconds = Math.floor((Date.now() - date) / 1000);
   const interval = Math.floor(seconds / 31536000);
diff --git a/src/views/SelectorPage.vue b/src/views/SelectorPage.vue
index c3c1bfa..b3642d6 100644
--- a/src/views/SelectorPage.vue
+++ b/src/views/SelectorPage.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { useAutoHeight } from '@/utils/others';
+import { useAutoHeight, useAutoWidth } from '@/utils/others';
 
-// 页面: 输入框, 输入后解析当前选择器的结构
 useAutoHeight();
+useAutoWidth();
+
+const text = shallowRef('');
 </script>
 <template>
   <div flex flex-col items-center p-8px>
-    <input />
-    <div v-for="i in 60" :key="i">
-      {{ Math.random() }}
-    </div>
+    <NInput
+      v-model:value="text"
+      type="textarea"
+      placeholder="请输入选择器"
+      class="gkd_code"
+    />
   </div>
 </template>