feat: 集成Server API

app.config.ts

@@ -159,7 +159,7 @@ export default defineAppConfig({
       avatar: "/img/photo.jpg",
       name: "Terwer",
       slogan: "一个后端老菜鸟",
-      social: undefined,
+      social: <any>undefined,
     },
 
     // 社交图标 (显示于博主信息栏和页脚栏。内置图标：https://doc.xugaoyi.com/pages/a20ce8/#social)

components/vdoing/NavLink.vue

@@ -4,8 +4,8 @@
     :to="computes.link.value"
     @focusout.native="methods.focusoutAction"
     v-if="!VdoingUtil.isExternal(computes.link.value)"
-    :exact="computes.exact"
-    >{{ item.text }}</NuxtLink
+    :exact="computes.exact.value"
+    >{{ props.item.text }}</NuxtLink
   >
   <a
     v-else

components/vdoing/NavLinks.vue

@@ -80,7 +80,7 @@ const computes = {
 
   repoLink: computed(() => {
     const repo = appConfig.themeConfig.repo
-    logger.info("repo=>", repo)
+    // logger.debug("repo=>", repo)
     if (repo) {
       return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`
     }

components/vdoing/Navbar.vue

@@ -19,7 +19,9 @@
 
     <div class="links" :style="datas.linksWrapMaxWidth ? { 'max-width': datas.linksWrapMaxWidth + 'px' } : {}">
       <MeiliSearchBox v-if="computes.isMeilisearch" />
-      <NavLinks class="can-hide" />
+      <client-only v-if="!datas.isMobile">
+        <NavLinks class="can-hide" />
+      </client-only>
     </div>
   </header>
 </template>
@@ -33,6 +35,7 @@ const appConfig = useAppConfig()
 
 // datas
 const datas = reactive({
+  isMobile: true,
   linksWrapMaxWidth: null,
 })
 
@@ -49,6 +52,13 @@ const computes = {
 }
 
 // lifecycle
+onBeforeMount(async () => {
+  const deviceDetector = await import("next-vue-device-detector")
+  const d = deviceDetector.createDeviceDetector()
+  datas.isMobile = d.mobile
+  console.log(d.mobile)
+})
+
 onMounted(() => {
   // const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
   // const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))

components/vdoing/Sidebar.vue

@@ -7,7 +7,7 @@
 
         <div class="icons" v-if="computes.blogger.value.social">
           <a
-            v-for="(item, index) in computes.social.value.social.icons"
+            v-for="(item, index) in computes.blogger.value.social.icons"
             :href="item.link"
             :title="item.title"
             :class="['iconfont', item.iconClass]"
@@ -20,8 +20,9 @@
     </div>
 
     <!-- 移动端Nav -->
-    <NavLinks />
-
+    <client-only v-if="datas.isMobile">
+      <NavLinks />
+    </client-only>
     <slot name="top" />
 
     <!--
@@ -47,12 +48,25 @@ const props = defineProps({
   },
 })
 
+// datas
+const datas = reactive({
+  isMobile: false,
+})
+
 // computes
 const computes = {
   blogger: computed(() => {
     return appConfig.themeConfig.blogger
   }),
 }
+
+// lifecycle
+onBeforeMount(async () => {
+  const deviceDetector = await import("next-vue-device-detector")
+  const d = deviceDetector.createDeviceDetector()
+  datas.isMobile = d.mobile
+  console.log(d.mobile)
+})
 </script>
 
 <style lang="stylus">

layouts/vdoing.vue

@@ -123,7 +123,7 @@ const computes = {
       userPageClass,
     ]
 
-    logger.debug("pageClasses=>", pc)
+    // logger.debug("pageClasses=>", pc)
     return pc
   }),
   shouldShowNavbar: computed(() => {

nuxt.config.ts

@@ -1,11 +1,13 @@
 const isDev = process.env.NODE_ENV === "development"
+const isTest = process.env.NODE_ENV === "test"
 const isVercelBuild = process.env.BUILD_TYPE === "vercel"
-let appBase = "/appearance/themes/zhi/apps/blog/dist/"
-if (isDev || isVercelBuild) {
+let appBase = "/appearance/themes/zhi/blog/"
+if (isDev || isVercelBuild || isTest) {
   appBase = "/"
 }
 console.log("isVercelBuild=>", isVercelBuild)
 console.log("isDev=>", isDev)
+console.log("isTest=>", isTest)
 console.log("appBase=>", appBase)
 
 export default defineNuxtConfig({
@@ -43,6 +45,15 @@ export default defineNuxtConfig({
     },
   },
   runtimeConfig: {
+    // default type
+    VITE_DEFAULT_TYPE: "",
+    // siyuan
+    VITE_SIYUAN_API_URL: "",
+    VITE_SIYUAN_AUTH_TOKEN: "",
+    // WordPress
+    VITE_WORDPRESS_API_URL: "",
+    VITE_WORDPRESS_USERNAME: "",
+    VITE_WORDPRESS_PASSWORD: "",
     public: {
       VITE_LOG_LEVEL: "INFO",
       VITE_DEBUG_MODE: false,
@@ -53,7 +64,7 @@ export default defineNuxtConfig({
   },
   css: ["~/assets/vdoing/styles/index.styl"],
   meilisearch: {
-    hostUrl: "http://localhost:3000/api/middleware/meilisearch",
+    hostUrl: "http://localhost:3000/api/endpoint/meilisearch",
     // hostUrl: "http://localhost:7700",
     searchApiKey: "<your_search_key>",
     adminApiKey: "<your_admin_key>",

package.json

@@ -21,8 +21,10 @@
   "devDependencies": {
     "@iconify/json": "^2.2.36",
     "@nuxt/content": "^2.5.2",
+    "@nuxt/test-utils": "^3.3.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/lodash": "^4.14.191",
+    "@types/showdown": "^2.0.0",
     "eslint": "^8.36.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -35,10 +37,13 @@
     "stylus": "^0.59.0",
     "typescript": "^4.9.5",
     "unplugin-icons": "^0.15.3",
+    "vitest": "^0.29.3",
     "vue-tsc": "^1.2.0"
   },
   "dependencies": {
     "good-storage": "^1.1.1",
+    "next-vue-device-detector": "^0.0.1",
+    "showdown": "^2.1.0",
     "vue-instantsearch": "^4.8.7",
     "zhi-sdk": "^1.0.12"
   },

pages/index.vue

@@ -3,9 +3,10 @@
     <icon-accessibility />
     <icon-account-box style="font-size: 2em; color: red" />
 
-    <div v-for="testItem in testItems.items">
-      index
-      <p>{{ testItem }}</p>
+    <div v-for="post in testPosts.posts">
+      <h1>
+        <NuxtLink :to="'/post/' + post.postid"> {{ post.title }} </NuxtLink>
+      </h1>
     </div>
   </div>
 </template>
@@ -17,25 +18,30 @@ import Env from "zhi-env"
 import ThemeFromEnum from "~/utils/enums/themeFromEnum"
 import IconAccessibility from "~icons/carbon/accessibility"
 import IconAccountBox from "~icons/mdi/account-box"
+import { SERVER_API_CONSTANTS } from "~/utils/lib-temp/constants/serverApiConstants"
+import { Post } from "~/utils/lib-temp/common/post"
 
 const nuxtEnv = useRuntimeConfig()
 const env = new Env(nuxtEnv)
 const zhiSdk = ZhiUtil.zhiSdk(env)
 const logger = zhiSdk.getLogger()
 const common = zhiSdk.common
 
-const testItems = reactive({
-  items: <string[]>[],
+const testPosts = reactive({
+  posts: <Post[]>[],
 })
 
-for (let i = 0; i < 20; i++) {
-  testItems.items.push("hello")
-}
-
 function hello(from: string): void {
   logger.debug("Nuxt env is ok")
   logger.info(common.strUtil.f("Hello, {0} {1} v{2}! You are from {3}", "zhi", "theme", version, from))
 }
 
 hello(ThemeFromEnum.ThemeFrom_Blog)
+
+try {
+  const { data } = await useFetch(SERVER_API_CONSTANTS.SERVER_API_GET_RECENT_POSTS)
+  testPosts.posts = <Post[]>(data.value as any).data
+} catch (e) {
+  logger.error(SERVER_API_CONSTANTS.SERVER_API_GET_RECENT_POSTS + "error", e)
+}
 </script>

pages/post/[id].vue

@@ -1,5 +1,35 @@
 <template>
-  <p>
-    {{ $route.params.id }}
-  </p>
+  <div>
+    <div v-html="testPost.post.description"></div>
+  </div>
 </template>
+
+<script lang="ts" setup>
+import { SERVER_API_CONSTANTS } from "~/utils/lib-temp/constants/serverApiConstants"
+import { Post } from "~/utils/lib-temp/common/post"
+import Env from "zhi-env"
+import ZhiUtil from "~/utils/zhiUtil"
+
+const nuxtEnv = useRuntimeConfig()
+const env = new Env(nuxtEnv)
+const zhiSdk = ZhiUtil.zhiSdk(env)
+const logger = zhiSdk.getLogger()
+
+const route = useRoute()
+
+const testPost = reactive({
+  post: <Post>{},
+})
+
+try {
+  const res = await useFetch(SERVER_API_CONSTANTS.SERVER_API_GET_POST, {
+    method: "post",
+    body: {
+      id: route.params.id.includes(".html") ? route.params.id.toString().replace(".html", "") : route.params.id,
+    },
+  })
+  testPost.post = <Post>(res?.data.value as any).data
+} catch (e) {
+  logger.error(SERVER_API_CONSTANTS.SERVER_API_GET_POST + "error", e)
+}
+</script>

plugins/device.ts

@@ -0,0 +1,6 @@
+// import { createDeviceDetector } from "next-vue-device-detector"
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  // const device = createDeviceDetector()
+  // vueApp.use(device)
+})