feat: save

packages/web/src/App.vue

@@ -1,3 +1,8 @@
 <template>
-  <RouterView />
+  <n-message-provider>
+    <RouterView />
+  </n-message-provider>
 </template>
+<script lang="ts" setup>
+import { NMessageProvider } from 'naive-ui'
+</script>

packages/web/src/components/header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header grid min-h-sm w-full bg-cyan-800 flex flex-col">
+  <div class="header grid min-h-sm w-full  flex flex-col">
     <div class="w-full h-[100px] flex max-w-screen-xl my-0 mx-auto justify-between items-center">
       <div class="logo">
         <img src="@/assets/img/logo_4dge_cn.png" alt="logo" />

packages/web/src/components/subHeader.vue

@@ -13,8 +13,8 @@
   </div>
 </template>
 <script setup lang="ts">
-import { NH1, NInput, NIcon, NDropdown, NButton } from 'naive-ui'
-import { SearchOutline } from '@vicons/ionicons5'
+import { NDropdown, NButton } from 'naive-ui'
+// import { SearchOutline } from '@vicons/ionicons5'
 
 const { t, locale } = useI18n()
 

packages/web/src/layouts/base.vue

@@ -16,7 +16,8 @@ import Footer from '../components/footer.vue'
 // import { createTheme, inputDark, datePickerDark } from 'naive-ui'
 // createTheme([inputDark, datePickerDark])
 const darkTheme = null
-const route = useRoute()
+// const route = useRoute()
+window.$message = useMessage()
 </script>
 
 <style></style>

packages/web/src/layouts/default.vue

@@ -25,7 +25,8 @@ import Footer from '../components/footer.vue'
 // import { createTheme, inputDark, datePickerDark } from 'naive-ui'
 // createTheme([inputDark, datePickerDark])
 const darkTheme = null
-const route = useRoute()
+window.$message = useMessage()
+
 </script>
 
 <style></style>

packages/web/src/pages/index.vue

@@ -120,7 +120,7 @@ meta:
 </route>
 
 <script setup lang="ts">
-import { NH1, NImage, NGrid, NGi } from 'naive-ui'
+import { NH1, NGrid, NGi } from 'naive-ui'
 import { getMenuList } from '@/api'
 import type { MenuItem } from '@/api'
 import { Swiper, SwiperSlide } from 'swiper/vue'
@@ -137,8 +137,8 @@ getMenuList().then((data) => {
   }
 })
 
-const onSwiper = (swiper) => {
-  console.log(swiper)
+const onSwiper = () => {
+  // console.log(swiper)
 }
 const onSlideChange = () => {
   console.log('slide change')

packages/web/src/pages/showdoc.vue

@@ -1,21 +1,44 @@
 <template>
   <div class="max-w-screen-xl content my-0 mx-auto text-size-base">
-    <template v-if="detail">
-      <n-h1> {{ detail.title }}</n-h1>
-      <div v-html="detail.content"></div>
-    </template>
+    <div v-if="detail" class="mt-[100px]">
+      <div class="flex flex-row flex-nowrap">
+        <div class="flex-1 flex-basis-[160px] flex-grow-0">
+          <n-collapse accordion>
+            <n-collapse-item title="青铜" name="1">
+              <div class="px-4">可以</div>
+            </n-collapse-item>
+            <n-collapse-item title="白银" name="2">
+              <div class="px-4">很好</div>
+            </n-collapse-item>
+            <n-collapse-item title="黄金" name="3">
+              <div class="px-4">真棒</div>
+            </n-collapse-item>
+          </n-collapse>
+        </div>
+        <div class="flex-1 px-[20px] mb-[120px]">
+          <n-h1> {{ detail.title }}</n-h1>
+          <div class="w-full" v-html="detail.content"></div>
+        </div>
+
+        <div class="flex-1 flex-basis-[240px] flex-grow-0">
+          <div class="min-h-[200px] bg-[#F5F9FF] b-r-[8px] p-[20px]">
+            <n-h4 class="font-600">主要内容</n-h4>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <route lang="yaml">
 meta:
-  title: showdoc
-  layout: base
+title: showdoc
+layout: base
 </route>
 
 <script setup lang="ts">
 import { type ArticleDetailType, getArticleDetail } from '@/api'
-import { NH1 } from 'naive-ui'
+import { NH1, NH4, NCollapse, NCollapseItem } from 'naive-ui'
 
 const route = useRoute()
 const id = route.query.id
@@ -28,8 +51,9 @@ watchEffect(() => {
   if (id) {
     getArticleDetail(+id).then((data) => {
       if (data.data) {
-        console.log(data)
+        console.log('ArticleDetail', data)
         detail.value = data.data
+        document.title = detail.value.title
       }
     })
   }

packages/web/src/utils/http/index.ts

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import type { AxiosInstance, AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
-import { useMessage } from 'naive-ui'
+
 // 数据返回的接口
 // 定义请求响应参数，不含data
 interface Result {
@@ -50,7 +50,7 @@ class RequestHttp {
         return {
           ...config,
           headers: {
-            'locale': locale, // 请求头中携带token信息
+            locale: locale, // 请求头中携带token信息
           },
         }
       },
@@ -66,7 +66,7 @@ class RequestHttp {
      */
     this.service.interceptors.response.use(
       (response: AxiosResponse) => {
-        const message = useMessage()
+        // const message = useMessage()
         const { data } = response // 解构
         if (data.code === RequestEnums.OVERDUE) {
           // 登录信息失效，应跳转到登录页面，并清空本地的token
@@ -78,19 +78,19 @@ class RequestHttp {
         }
         // 全局错误信息拦截（防止下载文件得时候返回数据流，没有code，直接报错）
         if (data.code && data.code !== RequestEnums.SUCCESS) {
-          message.error(data) // 此处也可以使用组件提示报错信息
+          window.$message.error(data) // 此处也可以使用组件提示报错信息
           return Promise.reject(data)
         }
         return data
       },
       (error: AxiosError) => {
-        const message = useMessage()
+        // const message = useMessage()
         const { response } = error
         if (response) {
           this.handleCode(response.status)
         }
         if (!window.navigator.onLine) {
-          message.error('网络连接失败')
+          window.$message.error('网络连接失败')
           // 可以跳转到错误页面，也可以不做操作
           // return router.replace({
           //   path: '/404'
@@ -101,13 +101,13 @@ class RequestHttp {
   }
 
   handleCode(code: number): void {
-    const message = useMessage()
+    // const message = useMessage()
     switch (code) {
       case 401:
-        message.error('登录失败，请重新登录')
+        window.$message.error('登录失败，请重新登录')
         break
       default:
-        message.error('请求失败')
+        window.$message.error('请求失败')
         break
     }
   }