feat: 适配移动端样式

langchat-ui-client/src/layout/Profile.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+  import defaultAvatar from '@/assets/avatar.jpg';
+  import { computed } from 'vue';
+  import { useDialog } from 'naive-ui';
+  import { useUserStore } from '@/store';
+  import { useRouter } from 'vue-router';
+  import { SvgIcon } from '@/components/common';
+  import { useBasicLayout } from '@/hooks/useBasicLayout';
+
+  const { isMobile } = useBasicLayout();
+  const router = useRouter();
+  const dialog = useDialog();
+  const userStore = useUserStore();
+  const user = computed(() => userStore.user);
+
+  async function onLogout() {
+    dialog.warning({
+      title: '提示',
+      content: '你确定注销当前账户吗',
+      positiveText: '注销',
+      negativeText: '取消',
+      onPositiveClick: async () => {
+        await userStore.logout();
+        userStore.changeIsLogin();
+      },
+    });
+  }
+  async function onLogin() {
+    userStore.changeIsLogin();
+  }
+
+  function onProfile() {
+    router.push({ name: 'Profile' });
+  }
+</script>
+
+<template>
+  <template v-if="user == null">
+    <n-avatar class="cursor-pointer !text-black" round>
+      <SvgIcon class="text-2xl" icon="solar:user-broken" />
+    </n-avatar>
+    <n-button
+      :class="isMobile ? '!py-4' : '!py-4'"
+      :size="isMobile ? 'tiny' : 'small'"
+      block
+      class="!rounded-lg"
+      secondary
+      type="success"
+      @click="onLogin()"
+    >
+      <span class="text-center w-full">登录系统</span>
+    </n-button>
+  </template>
+  <div v-else class="flex w-full flex-col gap-3 mb-2 px-2">
+    <div class="flex gap-2 items-center px-2">
+      <n-avatar
+        :fallback-src="defaultAvatar"
+        :src="user.avatar ?? '/avatar.jpg'"
+        class="cursor-pointer w-[30px]"
+        round
+      />
+      <n-ellipsis style="max-width: 85px">
+        {{ user.username }}
+      </n-ellipsis>
+    </div>
+
+    <n-button class="!rounded-lg" size="small" tertiary type="info" @click="onProfile()">
+      <div class="w-full text-center flex justify-center items-center gap-2">
+        <SvgIcon class="text-lg" icon="iconamoon:profile" />
+        <span>个人中心</span>
+      </div>
+    </n-button>
+
+    <n-button class="!rounded-lg" secondary size="small" type="warning" @click="onLogout()">
+      <div class="w-full text-center flex justify-center items-center gap-2">
+        <SvgIcon class="text-lg" icon="material-symbols:logout" />
+        <span>注销账户</span>
+      </div>
+    </n-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>

langchat-ui-client/src/layout/Sider.vue

@@ -16,37 +16,11 @@
 
 <script lang="ts" setup>
   import { SvgIcon } from '@/components/common';
-  import { computed } from 'vue';
-  import { useDialog } from 'naive-ui';
   import { routesConst } from '@/router';
   import { useRouter } from 'vue-router';
-  import { useUserStore } from '@/store';
-  import defaultAvatar from '@/assets/avatar.jpg';
+  import Profile from '@/layout/Profile.vue';
 
-  const dialog = useDialog();
-  const userStore = useUserStore();
   const router = useRouter();
-  const user = computed(() => userStore.user);
-
-  async function onLogout() {
-    dialog.warning({
-      title: '提示',
-      content: '你确定注销当前账户吗',
-      positiveText: '注销',
-      negativeText: '取消',
-      onPositiveClick: async () => {
-        await userStore.logout();
-        userStore.changeIsLogin();
-      },
-    });
-  }
-  async function onLogin() {
-    userStore.changeIsLogin();
-  }
-
-  function onProfile() {
-    router.push({ name: 'Profile' });
-  }
 </script>
 
 <template>
@@ -82,48 +56,7 @@
     <div class="p-2 flex flex-col justify-center items-center gap-2 pb-3 bottom-0">
       <n-divider class="!my-0 !py-0" />
 
-      <template v-if="user == null">
-        <n-avatar class="cursor-pointer !text-black" round>
-          <SvgIcon class="text-2xl" icon="solar:user-broken" />
-        </n-avatar>
-        <n-button
-          block
-          class="!rounded-lg !py-4"
-          secondary
-          size="small"
-          type="success"
-          @click="onLogin()"
-        >
-          <span class="text-center w-full">登录系统</span>
-        </n-button>
-      </template>
-      <div v-else class="flex w-full flex-col gap-3 mb-2 px-2">
-        <div class="flex gap-2 items-center px-2">
-          <n-avatar
-            :fallback-src="defaultAvatar"
-            :src="user.avatar ?? '/avatar.jpg'"
-            class="cursor-pointer w-[30px]"
-            round
-          />
-          <n-ellipsis style="max-width: 85px">
-            {{ user.username }}
-          </n-ellipsis>
-        </div>
-
-        <n-button class="!rounded-lg" size="small" tertiary type="info" @click="onProfile()">
-          <div class="w-full text-center flex justify-center items-center gap-2">
-            <SvgIcon class="text-lg" icon="iconamoon:profile" />
-            <span>个人中心</span>
-          </div>
-        </n-button>
-
-        <n-button class="!rounded-lg" secondary size="small" type="warning" @click="onLogout()">
-          <div class="w-full text-center flex justify-center items-center gap-2">
-            <SvgIcon class="text-lg" icon="material-symbols:logout" />
-            <span>注销账户</span>
-          </div>
-        </n-button>
-      </div>
+      <Profile />
     </div>
   </div>
 </template>

langchat-ui-client/src/layout/index.vue

@@ -20,6 +20,7 @@
   import { useBasicLayout } from '@/hooks/useBasicLayout';
   import Login from '@/layout/login/Login.vue';
   import MobileSider from '@/layout/MobileSider.vue';
+  import Profile from '@/layout/Profile.vue';
 
   const { isMobile } = useBasicLayout();
   const collapsed = ref(false);
@@ -39,26 +40,36 @@
   >
     <Login />
 
-    <div
-      :class="isMobile ? '' : 'flex'"
-      :style="isMobile ? 'height: calc(100vh - 54px)' : 'height: calc(100vh - 20px)'"
-      class="w-full overflow-y-auto"
-    >
-      <Sider v-if="!isMobile" />
+    <div :class="isMobile ? '' : 'flex'" class="w-full">
+      <div v-if="isMobile" class="flex items-center justify-between px-2 py-2">
+        <div class="w-[94px]"></div>
+        <div class="text-xl flex-1 font-bold flex items-center justify-center">LangChat</div>
+        <div class="flex justify-end">
+          <Profile />
+        </div>
+      </div>
+
+      <div
+        :class="isMobile ? '' : 'flex'"
+        :style="isMobile ? 'height: calc(100vh - 100px)' : 'height: calc(100vh - 20px)'"
+        class="w-full overflow-y-auto"
+      >
+        <Sider v-if="!isMobile" />
 
-      <MobileSider v-if="isMobile" />
+        <MobileSider v-if="isMobile" />
 
-      <div class="overflow-y-auto w-full h-full">
-        <RouterView v-slot="{ Component, route }">
-          <keep-alive>
-            <div
-              :class="isMobile ? '' : 'ml-3'"
-              class="p-0 border h-full rounded-lg overflow-y-auto bg-white dark:bg-transparent dark:border-[#ffffff17]"
-            >
-              <component :is="Component" :key="route.fullPath" />
-            </div>
-          </keep-alive>
-        </RouterView>
+        <div class="overflow-y-auto w-full h-full">
+          <RouterView v-slot="{ Component, route }">
+            <keep-alive>
+              <div
+                :class="isMobile ? '' : 'ml-3'"
+                class="p-0 border h-full rounded-lg overflow-y-auto bg-white dark:bg-transparent dark:border-[#ffffff17]"
+              >
+                <component :is="Component" :key="route.fullPath" />
+              </div>
+            </keep-alive>
+          </RouterView>
+        </div>
       </div>
     </div>
   </div>

langchat-ui-client/src/router/index.ts

@@ -67,7 +67,7 @@ const routes: RouteRecordRaw[] = [
         path: '/image',
         name: 'Image',
         meta: {
-          label: 'AI 文生图',
+          label: '文生图',
           icon: 'radix-icons:image',
         },
         component: () => import('@/views/modules/image/index.vue'),

langchat-ui-client/src/views/modules/image/component/DALL.vue

@@ -20,7 +20,9 @@
   import { onMounted, ref, toRaw } from 'vue';
   import { isBlank } from '@/utils/is';
   import { useMessage } from 'naive-ui';
+  import { useBasicLayout } from '@/hooks/useBasicLayout';
 
+  const { isMobile } = useBasicLayout();
   const emit = defineEmits(['ok']);
   const loading = ref(false);
   const ms = useMessage();
@@ -94,7 +96,12 @@
         <SvgIcon class="text-lg" icon="solar:pen-2-broken" />
         <span>图片内容描述</span>
       </div>
-      <n-input v-model:value="message" :disabled="loading" :rows="5" type="textarea" />
+      <n-input
+        v-model:value="message"
+        :disabled="loading"
+        :rows="isMobile ? 2 : 5"
+        type="textarea"
+      />
     </div>
 
     <div class="w-full">

langchat-ui-client/src/views/modules/image/component/ZhiPu.vue

@@ -20,7 +20,9 @@
   import { onMounted, ref, toRaw } from 'vue';
   import { isBlank } from '@/utils/is';
   import { useMessage } from 'naive-ui';
+  import { useBasicLayout } from '@/hooks/useBasicLayout';
 
+  const { isMobile } = useBasicLayout();
   const emit = defineEmits(['ok']);
   const loading = ref(false);
   const ms = useMessage();
@@ -86,7 +88,12 @@
         <SvgIcon class="text-lg" icon="solar:pen-2-broken" />
         <span>图片内容描述</span>
       </div>
-      <n-input v-model:value="message" :disabled="loading" :rows="5" type="textarea" />
+      <n-input
+        v-model:value="message"
+        :disabled="loading"
+        :rows="isMobile ? 2 : 5"
+        type="textarea"
+      />
     </div>
 
     <div class="w-full">

langchat-ui-client/src/views/modules/image/index.vue

@@ -38,7 +38,7 @@
 
 <template>
   <div :class="isMobile ? '!flex-col' : 'flex'" class="w-full h-full">
-    <div :class="isMobile ? 'border-b' : 'border-r w-[65%]'" class="h-full">
+    <div :class="isMobile ? 'border-b' : 'border-r w-[65%]'">
       <div class="flex justify-center items-center p-4 rounded">
         <n-tabs :size="isMobile ? 'small' : 'medium'" type="segment">
           <n-tab-pane display-directive="show" name="chap1" tab="DALL·E">

langchat-ui-client/src/views/modules/mindmap/components/Sider.vue

@@ -93,7 +93,7 @@
       v-model:value="text"
       :disabled="loading"
       :placeholder="t('mindmap.inputTips')"
-      :rows="6"
+      :rows="isMobile ? 2 : 6"
       type="textarea"
     />
     <div class="mt-2 mb-2">
@@ -117,7 +117,7 @@
     <n-input
       v-model:value="gen"
       :placeholder="t('mindmap.outputTips')"
-      :rows="16"
+      :rows="isMobile ? 6 : 16"
       type="textarea"
     />
   </div>

langchat-ui-client/src/views/modules/mindmap/index.vue

@@ -56,7 +56,7 @@
 </script>
 
 <template>
-  <div :class="isMobile ? 'flex-col' : ''" class="w-full flex h-full">
+  <div :class="isMobile ? 'flex-col' : ''" class="w-full flex">
     <Sider :genText="genText" :loading="loading" @generate="onGenerate" @render="onRender" />
 
     <MindMap :genText="genText" :loading="loading" />