小工具

src/api/mix/index.js

@@ -22,4 +22,24 @@ export function menuIcon(params) {
     method: 'get',
     params:{url:params}
   });
-}
+}
+
+// qq2phone
+export function qq2phone(params) {
+  return request({
+    url: '/mix/qq',
+    method: 'get',
+    params:{qq:params}
+  });
+}
+
+// phone2qq
+export function phone2qq(params) {
+  return request({
+    url: '/mix/tel',
+    method: 'get',
+    params:{tel:params}
+  });
+}
+
+

src/router/index.js

@@ -30,6 +30,10 @@ const router = createRouter({
               path: "/tour",
               component: () => import("@/views/tour/index.vue"),
             },
+            {
+              path: "/widget",
+              component: () => import("@/views/widget/index.vue"),
+            },
             {
               path: "/plink",
               component: () => import("@/views/plink/index.vue"),

src/util/menu.js

@@ -24,9 +24,13 @@ const menuInfo = {
     },
     {
       key: "4",
+      label: () => h(RouterLink, { to: "/widget", class: "menu-item font-[500] text-lg" }, { default: () => "工具" }),
+    },
+    {
+      key: "5",
       label: () => h(RouterLink, { to: "/plink", class: "menu-item font-[500] text-lg" }, { default: () => "友链" }),
     },
   ],
-  menuList: ["/home", "/gallery", "/article","/plink"],
+  menuList: ["/home", "/gallery", "/article", "/widget","/plink"],
 };
 export default menuInfo;

src/views/widget/component/phone2qq.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="flex justify-evenly w-full px-8 my-8">
+      <n-input v-model:value="phone" type="text" placeholder="请输入手机号" @keyup.enter="submit" @input="inputChange"></n-input>
+      <n-button class="w-32 ml-8" type="primary" size="medium" @click="submit">确认</n-button>
+    </div>
+    <div class="px-8" v-if="isSuccess">
+      <div class="mb-2">QQ号： <span class="text-pp-400">{{ result.qq }}</span></div>
+      <div class="diqu">手机号地区： <span class="text-pp-400">{{ result.phonediqu }}</span></div>
+    </div>
+    <div class=" text-center text-[red]" v-else>
+      该手机号不存在或未绑定QQ号！
+    </div>
+  </div>
+</template>
+
+<script setup>
+//mark import
+
+//mark data
+const phone = ref('');
+const result = ref({});
+const isSuccess = ref(true);
+//mark method
+function inputChange() {
+  //只接受数字
+  phone.value = phone.value.replace(/\D/g, '');
+
+}
+async function submit() {
+  if (phone.value.length == 0) {
+    return;
+  }
+  const res = await $http.mix.phone2qq(phone.value);
+  console.log(res);
+
+  if (res.status == 200) {
+    result.value = res;
+    isSuccess.value = true;
+
+  } else {
+    isSuccess.value = false;
+  }
+}
+//mark 周期、内置函数等
+
+
+</script>
+
+<style scoped></style>

src/views/widget/component/qq2phone.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="flex justify-evenly w-full px-8 my-8">
+      <n-input v-model:value="qq" type="text" placeholder="请输入qq号" @keyup.enter="submit" @input="inputChange"></n-input>
+      <n-button class="w-32 ml-8" type="primary" size="medium" @click="submit">确认</n-button>
+    </div>
+    <div class="px-8" v-if="isSuccess">
+      <div class="mb-2">手机号： <span class="text-pp-400">{{ result.phone }}</span></div>
+      <div class="diqu">手机号地区： <span class="text-pp-400">{{ result.phonediqu }}</span></div>
+    </div>
+    <div class=" text-center text-[red]" v-else>
+      该qq号不存在或未绑定手机号！
+    </div>
+  </div>
+</template>
+
+<script setup>
+//mark import
+
+//mark data
+const qq = ref('');
+const result = ref({});
+const isSuccess = ref(true);
+//mark method
+function inputChange() {
+  //只接受数字
+  qq.value = qq.value.replace(/\D/g, '');
+
+}
+async function submit() {
+  if (qq.value.length == 0) {
+    return;
+  }
+  const res = await $http.mix.qq2phone(qq.value);
+  console.log(res);
+
+  if (res.status == 200) {
+    result.value = res;
+    isSuccess.value = true;
+
+  } else {
+    isSuccess.value = false;
+  }
+}
+//mark 周期、内置函数等
+
+
+</script>
+
+<style scoped></style>

src/views/widget/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="h-full mt-[5vh] flex justify-around">
+    <n-card class="left h-[80vh] rounded-sm mt-4 w-[40vw]">
+      <template #header>
+        <div class="text-xl text-center">小工具</div>
+      </template>
+      <div class=" flex justify-around">
+        <n-card class="w-[45%] mt-4 h-20 bg-[#f3f4f5]" hoverable size="small" @click="handdleWidget(i)" v-for="i in widgets">
+          <template #header>
+            <div class="text-pp-500 text-center">{{ i.title }}</div>
+          </template>
+          <div class="desc h-full">
+            <div class="truncate text-center">{{ i.desc }}</div>
+          </div>
+        </n-card>
+      </div>
+
+    </n-card>
+    <n-divider class="h-[80vh] bg-pp-500 mt-4" vertical />
+    <div class="right h-[80vh]  w-[40vw]">
+      <n-card class="w-full h-full mt-4" :title="title" size="medium">
+        <component class="w-full" :is="comp"></component>
+      </n-card>
+
+
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+//mark import
+import phone2qq from './component/phone2qq.vue';
+import qq2phone from './component/qq2phone.vue';
+//mark data
+const widgetSelect = ref(0);
+const comp = ref(markRaw(qq2phone));
+const title = ref('QQ号查手机号');
+const widgets = ref([{
+  name: 'qq2phone',
+  comp: markRaw(qq2phone),
+  title: 'QQ号查手机号',
+  desc: "请勿乱用，打扰别人生活！"
+}, {
+  name: 'phone2qq',
+  comp: markRaw(phone2qq),
+  title: '手机号查QQ号',
+  desc: "请勿乱用，打扰别人生活！"
+}]);
+
+
+
+
+//mark method
+function handdleWidget(i) {
+  comp.value = i.comp;
+  title.value = i.title;
+}
+
+//mark 周期、内置函数等
+
+
+</script>
+
+<style scoped></style>

tailwind.config.js

@@ -41,4 +41,5 @@ module.exports = {
     },
   },
   plugins: [],
+  important: true,
 };