添加一言

src/shared/api.ts

@@ -29,3 +29,7 @@ export function getProblemTagList() {
 export function getCaptcha() {
   return http.get("captcha")
 }
+
+export function getHitokoto() {
+  return http.get("hitokoto")
+}

src/shared/components/Hitokoto.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { getHitokoto } from "../api"
+
+const hitokoto = reactive({
+  sentence: "",
+  from: "",
+})
+
+async function receive() {
+  const res = await getHitokoto()
+  hitokoto.sentence = res.data.hitokoto
+  hitokoto.from = res.data.from
+}
+
+onMounted(receive)
+</script>
+<template>
+  <div class="hitokoto" @click="receive">
+    <div class="sentence">{{ hitokoto.sentence }}</div>
+    <div class="from">{{ "from " + hitokoto.from }}</div>
+  </div>
+</template>
+<style scoped>
+.hitokoto {
+  cursor: pointer;
+  height: 34px;
+}
+
+.hitokoto .sentence {
+  max-width: 500px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  white-space: nowrap;
+}
+
+.hitokoto .from {
+  float: right;
+  font-size: 12px;
+  color: grey;
+}
+</style>

src/shared/layout/default.vue

@@ -7,7 +7,7 @@ import Signup from "../components/Signup.vue"
 
 <template>
   <n-layout position="absolute">
-    <n-layout-header bordered style="padding: 8px;">
+    <n-layout-header bordered style="padding: 8px">
       <Header class="header" />
     </n-layout-header>
     <n-layout-content
@@ -22,7 +22,7 @@ import Signup from "../components/Signup.vue"
 </template>
 
 <style scoped>
-.header { 
+.header {
   max-width: 2000px;
   margin-left: auto;
   margin-right: auto;