feat:#1 搜索关键字

Author: terwer

Diff for: components/default/HeaderMenu.vue

@@ -36,14 +36,32 @@
           </div>
         </el-menu-item>
       </template>
+      <el-form :inline="true" class="s-form">
+        <el-form-item>
+          <el-input
+              style="max-width: 100%;min-width: 400px;"
+              :placeholder="$t('header.search.k.placeholder')"
+              maxlength="50"
+              show-word-limit
+              v-model="k"
+              @keyup.enter.native="doSearch"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="doSearch">{{ $t('header.search') }}</el-button>
+        </el-form-item>
+      </el-form>
     </el-menu>
+
   </client-only>
 </template>
 
 <script lang="ts" setup>
-import {ElMenu, ElMenuItem, ElSubMenu} from "element-plus";
-import {ref} from 'vue'
+import {ElMenu, ElMenuItem, ElSubMenu, ElInput, ElButton, ElForm, ElFormItem} from "element-plus";
+import {onMounted, ref} from 'vue'
 import logUtil from "~/lib/logUtil";
+import {useSearchStore} from "~/stores/searchStore";
+import {inBrowser} from "~/lib/util";
 
 const router = useRouter();
 
@@ -96,6 +114,25 @@ const handleSelect = (key: string, keyPath: string[]) => {
   router.push({path: key});
 
 }
+
+const k = ref("")
+const {sk} = useSearchStore()
+const doSearch = () => {
+  const key = "/s/" + k.value
+  router.push({path: key});
+
+  if (inBrowser()) {
+    if (window.location.href.indexOf("/s/") > -1) {
+      window.location.href=key
+    }
+  }
+
+  console.log("doSearch=>" + key)
+}
+
+onMounted(() => {
+  k.value = sk
+})
 </script>
 
 <script lang="ts">
@@ -115,4 +152,10 @@ export default {
   vertical-align: middle;
   padding-right: 5px;
 }
+
+/* 搜索 */
+.s-form {
+  padding-top: 12px;
+  margin-left: 20px;
+}
 </style>

Diff for: components/default/HomePostList.vue

@@ -1,11 +1,13 @@
 <template>
   <div id="postList">
     <div v-if="postData.postList.length > 0">
+      <el-row class="k-show">
+        <el-col v-if="props.keyword !== ''" class="s-keyword-dark" :spans="24">
+          关键字： {{ props.keyword }}
+        </el-col>
+      </el-row>
       <el-card v-for="post in postData.postList" :key="post.postid" class="post-item">
         <el-row>
-          <el-col v-if="postData.keyword !== ''" class="s-keyword-dark" :spans="24">
-            关键字： {{ postData.keyword }}
-          </el-col>
           <el-col
               v-if="!isMobile && post.thumbnails.length > 0"
               :xs="24"
@@ -41,7 +43,7 @@
                 发布于 {{ post.dateCreated || (new Date()).toISOString() }}
               </div>
               <nuxt-link :to="'/post/' + post.postid + '.html'">
-              <el-button type="text" class="read-more">查看全文</el-button>
+                <el-link :underline="false" class="read-more">查看全文</el-link>
               </nuxt-link>
             </div>
           </el-col>
@@ -55,18 +57,30 @@
 import {SERVER_API_CONSTANTS} from "~/lib/constants/serverApiConstants";
 import {Post} from "~/lib/common/post";
 import {isMobile} from "~/lib/util";
-import {ElButton, ElCard, ElCol, ElRow} from "element-plus";
+import {ElCard, ElCol, ElLink, ElRow} from "element-plus";
+import logUtil from "~/lib/logUtil";
+
+const props = defineProps({
+  keyword: {
+    type: String,
+    default: ""
+  },
+  page: {
+    type: Number,
+    default: 1
+  }
+})
 
 const postData = ref({
   isMobile: isMobile(),
-  keyword: "",
   postList: <Post[]>[]
 })
 
 const route = useRoute()
 
 const homePostsUrl = route.query.t ? SERVER_API_CONSTANTS.SERVER_API_GET_RECENT_POSTS + "?t=" + route.query.t :
     SERVER_API_CONSTANTS.SERVER_API_GET_RECENT_POSTS
+logUtil.logError(props.keyword)
 const {data} = await useFetch(homePostsUrl)
 // @ts-ignore
 // postData.value.postList = data.value.data
@@ -100,8 +114,8 @@ export default {
 }
 
 #postList .post-item {
-  margin: 0;
-  padding: 10px;
+  margin: 0 0 10px 0;
+  padding: 0 10px;
 }
 
 #postList .bottom {
@@ -153,4 +167,8 @@ export default {
 #postList .s-keyword-dark {
   color: red;
 }
+
+#postList .k-show {
+  margin-bottom: 20px;
+}
 </style>

Diff for: locales/en_US.ts

@@ -9,4 +9,6 @@ export default {
     "theme.choose.terwer": "Terwer theme",
     "ele.select.placeholder": "Select",
     "header.nowis":"Now is",
+    "header.search":"Search",
+    "header.search.k.placeholder":"Please input...",
 }

Diff for: locales/zh_CN.ts

@@ -9,4 +9,6 @@ export default {
     "theme.choose.terwer": "特维主题",
     "ele.select.placeholder": "请选择",
     "header.nowis":"现在是",
+    "header.search":"搜索",
+    "header.search.k.placeholder":"请输入关键字",
 }

Diff for: pages/post/[postid].vue

@@ -1,18 +1,5 @@
 <template>
   <div id="post" class="post-detail-content-box">
-    <!-- 导航 -->
-    <!--
-    <el-breadcrumb separator="/">
-      <el-breadcrumb-item
-          v-for="item in items"
-          :key="item.text"
-          :to="item.to"
-      >
-        {{ item.text }}
-      </el-breadcrumb-item>
-    </el-breadcrumb>
-    -->
-
     <!-- 文章标题 -->
     <div id="postTitle">
       <div class="title-text">
@@ -21,19 +8,17 @@
       <input type="hidden" :value="postObj.postid"/>
     </div>
 
-    <!--
-    <div v-if="postObj.tagArray">
+    <div id="tagArea" v-if="postTags.length>0">
       <NuxtLink
-          v-for="tagItem in postObj.tagArray"
-          :key="tagItem.tag"
-          :to="'/tag/' + tagItem.tag"
+          v-for="tagItem in postTags"
+          :key="tagItem"
+          :to="'/tag/' + tagItem"
       >
-        <el-tag :type="tagItem.color" class="post-tag">
-          {{ tagItem.tag }}
+        <el-tag class="post-tag">
+          {{ tagItem }}
         </el-tag>
       </NuxtLink>
     </div>
-    -->
 
     <!-- 文章详情 -->
     <div
@@ -56,9 +41,12 @@
 import logUtil from "~/lib/logUtil";
 import {SERVER_API_CONSTANTS} from "~/lib/constants/serverApiConstants";
 import {Post} from "~/lib/common/post";
+import {isEmptyString} from "~/lib/util";
+import {ElTag} from "element-plus";
 
 const route = useRoute()
 let postObj = new Post()
+let postTags = <string[]>[]
 
 let postUrl = SERVER_API_CONSTANTS.SERVER_API_GET_POST;
 if (route.query.t) {
@@ -79,6 +67,9 @@ if (route.params.postid) {
 const {data} = await useFetch(postUrl, {initialCache: false})
 // @ts-ignore
 postObj = data.value.data
+if (postObj.mt_keywords && !isEmptyString(postObj.mt_keywords)) {
+  postTags = postObj.mt_keywords.split(",")
+}
 logUtil.logInfo(postUrl + " data=>", data.value)
 </script>
 
@@ -107,4 +98,12 @@ export default {
   font-size: 32px;
   color: var(--el-color-primary);
 }
+
+#tagArea {
+  margin-top: 10px;
+}
+
+#tagArea .post-tag {
+  margin-right: 10px;
+}
 </style>

Diff for: pages/s/[keyword].vue

@@ -0,0 +1,23 @@
+<template>
+  <HomePostList :keyword="sk"></HomePostList>
+</template>
+
+<script lang="ts" setup>
+import HomePostList from "~/components/default/HomePostList.vue";
+import {useSearchStore} from "~/stores/searchStore";
+
+const route = useRoute()
+const {sk, setSk} = useSearchStore()
+setSk(route.params.keyword.toString())
+
+</script>
+
+<script lang="ts">
+export default {
+  name: "keyword"
+}
+</script>
+
+<style scoped>
+
+</style>

Diff for: stores/searchStore.ts

@@ -0,0 +1,14 @@
+import {defineStore} from "pinia";
+
+/**
+ * 搜索关键字存储
+ */
+export const useSearchStore = defineStore("sk", () => {
+    const sk = ref("")
+
+    function setSk(s: string) {
+        sk.value = s
+    }
+
+    return {sk, setSk}
+})