feat: 新增layout内容

src/auto-imports.d.ts

@@ -0,0 +1,71 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

src/hook-fetch.d.ts

@@ -0,0 +1 @@
+/// <reference types="hook-fetch/plugins" />

src/layout/index.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { ConversationItem } from 'vue-element-plus-x/types/components/Conversations/types';
+import { Conversations } from 'vue-element-plus-x';
+import { useRoute, useRouter } from 'vue-router';
+
+interface ChatItem {
+  key: string;
+}
+
+const route = useRoute();
+const router = useRouter();
+const active = computed<string>(() => (route.params?.id as string) ?? '');
+const items = ref<ConversationItem<ChatItem>[]>([
+  {
+    key: '1',
+    label: '今天的会话111111111111111111111111111',
+    group: 'today',
+    disabled: true,
+  },
+  {
+    key: '2',
+    group: 'today',
+    label: '今天的会话2',
+  },
+  {
+    key: '3',
+    group: 'yesterday',
+    label: '昨天的会话1',
+  },
+  {
+    key: '4',
+    label: '昨天的会话2',
+  },
+  {
+    key: '5',
+    label: '一周前的会话',
+  },
+  {
+    key: '6',
+    label: '一个月前的会话',
+  },
+  {
+    key: '7',
+    label: '很久以前的会话',
+  },
+]);
+
+function handleChange(item: ConversationItem<ChatItem>) {
+  console.log(item);
+  router.replace({
+    name: 'chat',
+    params: {
+      id: item.key,
+    },
+  });
+}
+</script>
+
+<template>
+  <el-container class="h-screen overflow-hidden">
+    <el-aside>
+      <el-button>新增</el-button>
+      <Conversations :active="active" :items="items" @change="handleChange" />
+    </el-aside>
+    <el-main>
+      <RouterView />
+    </el-main>
+  </el-container>
+</template>

src/pages/chat/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+console.log(route.params, '>>>>>>');
+const chatId = computed(() => route.params?.id);
+</script>
+
+<template>
+  <div>{{ chatId }}</div>
+</template>

src/pages/login/index.vue

@@ -14,6 +14,7 @@ async function handleSubmit() {
   try {
     await formRef.value?.validate();
     const _res = await login(formModel);
+    console.log(_res, 'res');
   }
   catch (error) {
     console.error('请求错误:', error);

src/router/index.ts

@@ -2,7 +2,17 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 import { jwtGuard } from './permissions';
 
 const routes = [
-  { path: '/', component: () => import('@/components/HelloWorld.vue') },
+  {
+    path: '/',
+    component: () => import('@/layout/index.vue'),
+    children: [
+      {
+        path: ':id',
+        name: 'chat',
+        component: () => import('@/pages/chat/index.vue'),
+      },
+    ],
+  },
   {
     path: '/login',
     name: 'login',

src/styles/index.scss

@@ -1,5 +1,5 @@
-@import 'reset-css';
-@import './element-plus.scss';
+@use 'reset-css';
+@use './element-plus.scss';
 
 body{
   overflow: hidden;

src/utils/request.ts

@@ -1,10 +1,11 @@
+import type { HookFetchPlugin } from 'hook-fetch';
 import hookFetch from 'hook-fetch';
 import { sseTextDecoderPlugin } from 'hook-fetch/plugins';
 
 interface BaseResponse {
   code: number;
   data: null;
-  message: string;
+  msg: string;
 }
 
 const instance = hookFetch.create<BaseResponse, unknown, 'data'>({
@@ -15,9 +16,17 @@ const instance = hookFetch.create<BaseResponse, unknown, 'data'>({
   plugins: [sseTextDecoderPlugin()],
 });
 
-function jwtPlugin() {
+function jwtPlugin(): HookFetchPlugin<BaseResponse> {
   return {
     name: 'jwt',
+    afterResponse: async (response) => {
+      console.log(response);
+      if (response.result?.code === 200) {
+        return response;
+      }
+      // alert(response.result?.msg);
+      return Promise.reject(response);
+    },
   };
 }