Merge pull request #21 from terwer/dev

feat:#1 新增设置页面

README.md

@@ -20,7 +20,13 @@ yarn
 ## dev
 
 ```bash
-vercel dev
+yarn dev
+```
+
+or
+
+```bash
+yarn vdev
 ```
 
 ## deploy

app.vue

@@ -1,7 +1,11 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage/>
-  </NuxtLayout>
+  <Transition name="page" mode="out-in">
+    <NuxtLayout>
+      <div :key="$route.fullPath">
+        <NuxtPage/>
+      </div>
+    </NuxtLayout>
+  </Transition>
 </template>
 
 <script lang="ts" setup>

assets/scss/index.scss

@@ -13,4 +13,36 @@ html.dark {
 a {
   font-weight: 400;
   color: var(--el-color-primary);
+}
+
+/*
+页面动画
+https://github.com/nuxt/framework/issues/3141#issuecomment-1212899838
+*/
+.page-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.page-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.page-enter-from,
+.page-leave-to {
+  transform: translateY(20px);
+  opacity: 0;
+}
+
+.layout-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.layout-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.layout-enter-from,
+.layout-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
 }

components/default/Footer.vue

@@ -0,0 +1,18 @@
+<template>
+  <footer>
+    footer .
+    <NuxtLink href="/setting">Setting</NuxtLink>
+  </footer>
+</template>
+
+<script lang="ts">
+
+export default {
+  name: "Footer"
+}
+
+</script>
+
+<style scoped>
+
+</style>

components/default/Header.vue

@@ -1,15 +1,31 @@
 <template>
   <header>
+    <el-page-header :icon="ArrowLeft" title="返回" @click="onBack" v-if="$route.fullPath!='/'">
+      <template #content>
+        <div class="flex items-center">
+          <span class="text-large font-600 mr-3"> {{ $route.fullPath }} </span>
+        </div>
+      </template>
+    </el-page-header>
+
     <Navbar/>
   </header>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import Navbar from "~/components/default/Navbar.vue";
+import {ElPageHeader} from "element-plus";
+import {ArrowLeft} from '@element-plus/icons-vue'
+
+const router = useRouter();
+const onBack = () => {
+  router.go(-1)
+}
+</script>
 
+<script lang="ts">
 export default {
   name: "Header",
-  components: {Navbar}
 }
 </script>
 

layouts/default.vue

@@ -1,12 +1,16 @@
 <template>
   <div>
     <Header/>
-    <slot/>
+    <slot />
+    <Footer/>
   </div>
 </template>
-<script>
-import Header from "../components/default/Header";
+
+<script lang="ts">
+import Header from "~/components/default/Header.vue";
+import Footer from "~/components/default/Footer.vue";
+
 export default {
-  components: {Header}
+  components: {Footer, Header}
 }
 </script>

lib/platform/metaweblog/customXmlrpc.ts

@@ -1,4 +1,5 @@
 import logUtil from "~/lib/logUtil";
+// 注意：这里必须带上后缀.js，否则生产环境的vercel会构建失败
 // @ts-ignore
 import * as Serializer from 'xmlrpc/lib/serializer.js'
 import { parse } from 'arraybuffer-xml-parser';

lib/platform/siyuan/siYuanApi.ts

@@ -18,21 +18,48 @@ export class SiYuanApi {
     /**
      * 分页获取根文档
      * @param page 页码
-     * @param pagesize 数目
      * @param keyword 关键字
      */
+    public async getRootBlocksCount(keyword: string) {
+        let stmt = `SELECT COUNT(DISTINCT b1.root_id) as count
+        FROM blocks b1
+        WHERE 1 = 1
+        AND ((b1.content LIKE '%${keyword}%') OR (b1.tag LIKE '%${keyword}%')
+    )`;
+        let data = await this.sql(stmt)
+        // logUtil.logError("getRootBlocksCount data=>", data[0].count)
+        return data[0].count
+    }
+
+    /**
+     * 分页获取根文档
+     * @param page 页码
+     * @param pagesize 数目
+     *
+     * select DISTINCT b2.root_id,b2.parent_id,b2.content from blocks b2
+     *        WHERE 1==1
+     * AND b2.id IN (
+     *     SELECT DISTINCT b1.root_id
+     *        FROM blocks b1
+     *        WHERE 1 = 1
+     *        AND ((b1.content LIKE '%github%') OR (b1.tag LIKE '%github%'))
+     *        ORDER BY b1.updated DESC,b1.created DESC LIMIT 0,10
+     * )
+     * ORDER BY b2.updated DESC,b2.created DESC
+     */
     public async getRootBlocks(page: number, pagesize: number, keyword: string) {
-        let stmt = `SELECT b.content, tmp.root_id
-                FROM (SELECT DISTINCT root_id
-                      FROM blocks
-                      WHERE 1 = 1
-                        AND content LIKE '%${keyword}%'
-                      ORDER BY created DESC LIMIT ${page}, ${pagesize}) tmp,
-                     blocks b
-                WHERE tmp.root_id = b.root_id
-                  AND b.parent_id = ''
-                ORDER BY b.created DESC`
-        return await this.sql(stmt)
+        let stmt = `select DISTINCT b2.root_id,b2.parent_id,b2.content from blocks b2 
+        WHERE 1==1
+        AND b2.id IN (
+             SELECT DISTINCT b1.root_id
+                FROM blocks b1
+                WHERE 1 = 1
+                AND ((b1.content LIKE '%${keyword}%') OR (b1.tag LIKE '%${keyword}%'))
+                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
     }
 
     /**

pages/setting.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="setting">
+    <el-form>
+      <h1>Setting</h1>
+      <el-form-item label="Lang">
+        <el-space :spacer="spacer">
+          <client-only>
+            <el-select v-model="lang" placeholder="Select">
+              <el-option
+                  v-for="item in langOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              />
+            </el-select>
+          </client-only>
+          <el-button type="primary" @click="enableCustomLayout">Update layout</el-button>
+        </el-space>
+      </el-form-item>
+      <el-form-item label="Layout">
+        <el-space :spacer="spacer">
+          <client-only>
+            <el-select v-model="value" placeholder="Select">
+              <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              />
+            </el-select>
+          </client-only>
+          <el-button type="primary" @click="enableCustomLayout">Update layout</el-button>
+        </el-space>
+      </el-form-item>
+      <el-form-item label="Dark mode">
+        <el-button type="primary">Change mode</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ElButton, ElDivider, ElForm, ElFormItem, ElOption, ElSelect, ElSpace} from "element-plus";
+import {h, ref} from 'vue'
+
+const value = ref('default')
+const options = [
+  {
+    value: 'default',
+    label: 'default',
+  },
+]
+const lang = ref('zh_CN')
+const langOptions = [
+  {
+    value: 'zh_CN',
+    label: '简体中文',
+  },
+  {
+    value: 'en_US',
+    label: 'English',
+  },
+]
+
+// 使用这一行可以不使用通用布局
+// definePageMeta({
+//   layout: false,
+// });
+
+const route = useRoute()
+
+function enableCustomLayout() {
+  route.meta.layout = "default"
+}
+
+const spacer = h(ElDivider, {direction: 'vertical'})
+</script>
+
+<script lang="ts">
+export default {
+  name: "seting"
+}
+</script>
+
+<style scoped>
+</style>