Merge pull request #31 from terwer/dev

feat:#1 搜索基本完成，暂停开发

components/default/HeaderMenu.vue

@@ -36,14 +36,33 @@
           </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"
+              @input="handleKInput"
+              @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 +115,26 @@ const handleSelect = (key: string, keyPath: string[]) => {
   router.push({path: key});
 
 }
+
+const k = ref("")
+const {sk} = useSearchStore()
+const handleKInput = () => {
+  k.value = k.value.replace("_", " ")
+}
+const doSearch = () => {
+  const key = "/s/" + k.value
+  router.push({path: key});
+
+  if (inBrowser()) {
+    window.location.href = key
+  }
+
+  console.log("doSearch=>" + key)
+}
+
+onMounted(() => {
+  k.value = sk
+})
 </script>
 
 <script lang="ts">
@@ -115,4 +154,10 @@ export default {
   vertical-align: middle;
   padding-right: 5px;
 }
+
+/* 搜索 */
+.s-form {
+  padding-top: 12px;
+  margin-left: 20px;
+}
 </style>

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,40 +43,122 @@
                 发布于 {{ 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>
         </el-row>
       </el-card>
     </div>
+
+    <!-- 分页 -->
+    <el-pagination
+        small
+        background
+        layout="prev, pager, next"
+        :total="total"
+        class="mt-4"
+        :page-size="MAX_PAGE_SIZE"
+        @prev-click="handlePrevPage"
+        @next-click="handleNextPage"
+        @current-change="handleCurrentPage"
+    />
+
+    <el-alert class="top-data-tip"
+              title="温馨提示：如果平台是思源笔记，请保证思源笔记启动并且打开伺服，默认伺服地址：http://127.0.0.1:6806。"
+              type="info" :closable="false"/>
   </div>
 </template>
 
 <script lang="ts" setup>
 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, ElAlert, ElPagination} from "element-plus";
+import logUtil from "~/lib/logUtil";
+import {onMounted} from "vue";
+
+const props = defineProps({
+  keyword: {
+    type: String,
+    default: ""
+  },
+  page: {
+    type: Number,
+    default: 1
+  }
+})
 
 const postData = ref({
   isMobile: isMobile(),
-  keyword: "",
   postList: <Post[]>[]
 })
 
+/* 分页 */
+const MAX_PAGE_SIZE = 5;
+const total = ref(0)
+const currentPage = ref(props.page)
+
 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
-const {data} = await useFetch(homePostsUrl)
-// @ts-ignore
-// postData.value.postList = data.value.data
-data.value.data.forEach((item: Post) => {
-  postData.value.postList.push(item)
+const loadHomeData = async () => {
+  let homePostsUrl = SERVER_API_CONSTANTS.SERVER_API_GET_RECENT_POSTS
+  if (route.query.t) {
+    homePostsUrl = homePostsUrl + "?t=" + route.query.t
+  }
+  if (props.keyword) {
+    if (homePostsUrl.indexOf("?") > -1) {
+      homePostsUrl = homePostsUrl + "&"
+    } else {
+      homePostsUrl = homePostsUrl + "?"
+    }
+    homePostsUrl = homePostsUrl + "k=" + props.keyword
+  }
+  if (currentPage.value >= 0) {
+    if (homePostsUrl.indexOf("?") > -1) {
+      homePostsUrl = homePostsUrl + "&"
+    } else {
+      homePostsUrl = homePostsUrl + "?"
+    }
+    homePostsUrl = homePostsUrl + "pg=" + currentPage.value
+  }
+  logUtil.logError(homePostsUrl)
+  const {data} = await useFetch(homePostsUrl, {initialCache: false})
+
+  postData.value.postList = []
+  // @ts-ignore
+  // postData.value.postList = data.value.data
+  data.value.data.forEach((item: Post) => {
+    postData.value.postList.push(item)
+  })
+  // logUtil.logError(data.value.data.length)
+  // logUtil.logInfo(SERVER_API_CONSTANTS.SERVER_API_GET_RECENT_POSTS + " data=>", data.value)
+
+  // 总数
+  total.value = 100
+  // total.value = await getRootBlocksCount(props.keyword)
+}
+
+const handlePrevPage = async (curPage: number) => {
+  currentPage.value = curPage;
+  logUtil.logInfo("handlePrevPage, currentPage=>", currentPage.value)
+  await loadHomeData();
+}
+const handleNextPage = async (curPage: number) => {
+  currentPage.value = curPage;
+  logUtil.logInfo("handleNextPage, currentPage=>", currentPage.value)
+  await loadHomeData();
+}
+const handleCurrentPage = async (curPage: number) => {
+  currentPage.value = curPage;
+  logUtil.logInfo("handleCurrentPage, currentPage=>", currentPage.value)
+  await loadHomeData();
+}
+
+await loadHomeData();
+onMounted(async () => {
+  await loadHomeData();
 })
-// logUtil.logError(data.value.data.length)
-// logUtil.logInfo(SERVER_API_CONSTANTS.SERVER_API_GET_RECENT_POSTS + " data=>", data.value)
 
 // definePageMeta({
 //   layout: "custom",
@@ -100,8 +184,8 @@ export default {
 }
 
 #postList .post-item {
-  margin: 0;
-  padding: 10px;
+  margin: 0 0 10px 0;
+  padding: 0 10px;
 }
 
 #postList .bottom {
@@ -111,7 +195,7 @@ export default {
 
 #postList .read-more {
   padding: 0;
-  margin-top: 15px;
+  margin: 15px 0;
   float: left;
   font-weight: bold;
 }
@@ -153,4 +237,8 @@ export default {
 #postList .s-keyword-dark {
   color: red;
 }
+
+#postList .k-show {
+  margin-bottom: 20px;
+}
 </style>

lib/platform/siyuan/siYuanApi.ts

@@ -58,6 +58,7 @@ export class SiYuanApi {
                 ORDER BY b1.updated DESC,b1.created DESC LIMIT ${page},${pagesize}
         )
         ORDER BY b2.updated DESC,b2.created DESC`
+
         let data = await this.sql(stmt)
         return data
     }

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...",
 }

locales/zh_CN.ts

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

nuxt.config.ts

@@ -93,5 +93,6 @@ export default defineNuxtConfig({
         WORDPRESS_API_URL: process.env.WORDPRESS_API_URL,
         WORDPRESS_USERNAME: process.env.WORDPRESS_USERNAME,
         WORDPRESS_PASSWORD: process.env.WORDPRESS_PASSWORD,
+        DEFAULT_TYPE: process.env.DEFAULT_TYPE
     }
 })

pages/index.vue

@@ -1,8 +1,11 @@
 <template>
-  <HomePostList/>
+  <HomePostList :page="pg"/>
 </template>
 
 <script lang="ts" setup>
+const route = useRoute()
+const pg = route.query.pg || 1
+
 useHead({
   title: 'My App Index',
   // or, instead:

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="'/s/' + 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>