feat: 适配移动端样式

langchat-ui-client/public/tinymce/skins/content/default/content.css

@@ -50,12 +50,13 @@ code {
   padding: 0.1rem 0.2rem;
 }
 .mce-content-body {
-	padding: 5px 2em 30px !important;
+	padding: 0px !important;
+	/*padding: 5px 2em 30px !important;*/
 	overflow-y: auto !important;
 	height: 100%;
 }
 .mce-content-body:before {
-	margin-left: 33px;
+	/*margin-left: 33px;*/
 }
 .mce-content-body:not([dir=rtl]) blockquote {
   border-left: 2px solid #ccc;

langchat-ui-client/src/App.vue

@@ -30,7 +30,7 @@
     :locale="language"
     :theme="theme"
     :theme-overrides="themeOverrides"
-    class="h-full w-full"
+    class="h-full w-full grid-mask"
   >
     <NaiveProvider>
       <RouterView />

langchat-ui-client/src/components/editor/index.vue

@@ -130,7 +130,7 @@
     link_default_target: '_blank',
     link_context_toolbar: true,
     // 默认快捷菜单
-    quickbars_insert_toolbar: 'image codesample table',
+    quickbars_insert_toolbar: '',
     // 选中图片的快捷提示
     // quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
     editimage_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+  import { SvgIcon } from '@/components/common';
+  import { routesConst } from '@/router';
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+</script>
+
+<template>
+  <div
+    class="px-1 py-2 mb-0 bg-[#fafafa] fixed bottom-0 z-10 overflow-x-auto w-full flex items-center justify-center"
+  >
+    <n-button
+      v-for="item in routesConst"
+      :key="item.name"
+      :class="
+        router.currentRoute.value.name == item.name
+          ? '!text-[#0052CC] w-full !bg-[#eff0f0] dark:!bg-[#ffffff1a] dark:border-[#ffffff17] !rounded-[8px]'
+          : 'w-full'
+      "
+      text
+      @click="router.push({ name: item.name })"
+    >
+      <div class="w-full py-1 flex items-center cursor-pointer flex-col gap-1.5 px-3">
+        <SvgIcon :icon="item.meta?.icon" class="text-lg" />
+        <div class="font-medium text-[11px]"> {{ item.meta?.label }} </div>
+      </div>
+    </n-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>

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

@@ -51,12 +51,10 @@
 
 <template>
   <div
-    class="h-full bg-[#fafafa] dark:bg-transparent flex border dark:border-[#ffffff17] flex-col w-full rounded-lg"
+    class="w-[190px] h-full bg-[#fafafa] dark:bg-transparent flex border dark:border-[#ffffff17] flex-col rounded-lg"
   >
     <n-scrollbar class="flex-1 w-full">
-      <div
-        class="flex flex-col gap-3 border-neutral-800 dark:border-[#ffffff17] pt-3 pl-3 pr-3 w-full"
-      >
+      <div class="flex flex-col gap-3 border-neutral-800 dark:border-[#ffffff17] pt-3 px-3 w-full">
         <div class="text-lg gap-2 text-center flex justify-center items-center">
           <img height="30" src="@/assets/login/logo.png" width="30" />
           <span class="font-bold">LangChat</span>
@@ -81,47 +79,8 @@
       </div>
     </n-scrollbar>
 
-    <div class="m-2 flex flex-col justify-center items-center gap-2 mb-4 bottom-0">
+    <div class="p-2 flex flex-col justify-center items-center gap-2 pb-3 bottom-0">
       <n-divider class="!my-0 !py-0" />
-      <!--      <n-space class="mb-2" vertical>
-				<n-popover placement="right" trigger="hover">
-					<template #trigger>
-						<n-button
-							v-if="appStore.theme == 'light'"
-							size="small"
-							text
-							@click="appStore.setTheme('dark')"
-						>
-							<template #icon>
-								<SvgIcon icon="ri:sun-foggy-line" />
-							</template>
-						</n-button>
-						<n-button
-							v-if="appStore.theme == 'dark'"
-							size="small"
-							text
-							@click="appStore.setTheme('light')"
-						>
-							<template #icon>
-								<SvgIcon icon="ri:moon-foggy-line" />
-							</template>
-						</n-button>
-					</template>
-					<span>{{ t('side.theme') }}</span>
-				</n-popover>
-
-				<n-popselect
-					v-model:value="language"
-					:options="languageOptions"
-					placement="right"
-					trigger="click"
-					@update-value="(value) => appStore.setLanguage(value)"
-				>
-					<n-button text>
-						<SvgIcon class="text-xl" icon="ph:translate-bold" />
-					</n-button>
-				</n-popselect>
-			</n-space>-->
 
       <template v-if="user == null">
         <n-avatar class="cursor-pointer !text-black" round>

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

@@ -16,10 +16,10 @@
 
 <script lang="ts" setup>
   import Sider from './Sider.vue';
-  import { SvgIcon } from '@/components/common';
   import { onMounted, ref, watch } from 'vue';
   import { useBasicLayout } from '@/hooks/useBasicLayout';
   import Login from '@/layout/login/Login.vue';
+  import MobileSider from '@/layout/MobileSider.vue';
 
   const { isMobile } = useBasicLayout();
   const collapsed = ref(false);
@@ -33,44 +33,33 @@
 </script>
 
 <template>
-  <div class="h-screen w-full grid-mask">
+  <div
+    :class="isMobile ? 'items-start' : 'px-3 items-center'"
+    class="w-full overflow-hidden flex justify-center h-full"
+  >
     <Login />
 
     <div
-      v-if="isMobile"
-      class="p-2 py-3 mb-0 bg-[#fafafa] border dark:border-[#ffffff17] bottom-b grid grid-cols-3"
+      :class="isMobile ? '' : 'flex'"
+      :style="isMobile ? 'height: calc(100vh - 54px)' : 'height: calc(100vh - 20px)'"
+      class="w-full overflow-y-auto"
     >
-      <n-button class="flex !justify-start" text type="primary" @click="collapsed = !collapsed">
-        <SvgIcon class="text-2xl" icon="solar:list-linear" />
-      </n-button>
-      <div class="text-xl font-bold flex justify-center">LangChat</div>
-      <div class="flex justify-end"></div>
-    </div>
+      <Sider v-if="!isMobile" />
+
+      <MobileSider v-if="isMobile" />
 
-    <n-layout class="h-full" has-sider>
-      <n-layout-sider
-        :collapsed="collapsed"
-        :collapsed-width="0"
-        :width="200"
-        @collapse="collapsed = true"
-        @expand="collapsed = false"
-      >
-        <div class="m-4 mr-2" style="height: calc(100vh - 33px)">
-          <Sider />
-        </div>
-      </n-layout-sider>
-      <n-layout-content>
+      <div class="overflow-y-auto w-full h-full">
         <RouterView v-slot="{ Component, route }">
           <keep-alive>
             <div
-              class="h-full m-4 ml-2 border rounded-lg overflow-hidden bg-white dark:bg-transparent dark:border-[#ffffff17]"
-              style="height: calc(100vh - 33px)"
+              :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>
-      </n-layout-content>
-    </n-layout>
+      </div>
+    </div>
   </div>
 </template>

langchat-ui-client/src/layout/login/Login.vue

@@ -136,7 +136,7 @@
                       secondary
                       type="info"
                       @click="isPhone = !isPhone"
-                      >邮箱密码登录</n-button
+                      >账户密码登录</n-button
                     >
                   </div>
                 </n-form-item>
@@ -187,14 +187,14 @@
                     >
                       立即登录
                     </n-button>
-                    <n-button
-                      block
-                      class="!rounded-lg"
-                      secondary
-                      type="info"
-                      @click="isPhone = !isPhone"
-                      >手机验证码登录</n-button
-                    >
+                    <!--                    <n-button-->
+                    <!--                      block-->
+                    <!--                      class="!rounded-lg"-->
+                    <!--                      secondary-->
+                    <!--                      type="info"-->
+                    <!--                      @click="isPhone = !isPhone"-->
+                    <!--                      >手机验证码登录</n-button-->
+                    <!--                    >-->
                   </div>
                 </n-form-item>
               </n-form>

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

@@ -216,7 +216,16 @@
   const footerClass = computed(() => {
     let classes = ['p-4 pt-0'];
     if (isMobile.value) {
-      classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden'];
+      classes = [
+        'sticky',
+        'absolute',
+        'left-0',
+        'bottom-0',
+        'right-0',
+        'p-2',
+        'pr-3',
+        'overflow-hidden',
+      ];
     }
     return classes;
   });
@@ -279,7 +288,8 @@
                   ref="inputRef"
                   v-model:value="prompt"
                   :autosize="{ minRows: 1, maxRows: isMobile ? 1 : 4 }"
-                  class="!rounded-full px-2 py-1"
+                  :class="isMobile ? '' : 'py-1'"
+                  class="!rounded-full px-2"
                   placeholder="今天想聊些什么~"
                   size="large"
                   type="textarea"

langchat-ui-client/src/views/modules/chat/sider/index.vue

@@ -88,7 +88,7 @@
     position="absolute"
     @update-collapsed="handleUpdateCollapsed"
   >
-    <div :style="mobileSafeArea" class="flex flex-col h-full">
+    <div :style="mobileSafeArea" class="flex flex-col h-full bg-white">
       <div v-if="loading" class="w-full h-full flex items-center justify-center">
         <n-spin :show="loading" />
       </div>

langchat-ui-client/src/views/modules/common/ModelProvider.vue

@@ -47,7 +47,7 @@
     modelList.value = data;
   });
 
-  function onUpdate(val, opt) {
+  function onUpdate(val: any, opt: any) {
     const obj = toRaw(opt);
     chatStore.modelId = obj.id;
     chatStore.modelName = obj.model;
@@ -62,6 +62,7 @@
     :label-field="'name'"
     :options="modelList"
     :value-field="'id'"
+    class="!rounded-4xl"
     @update:value="onUpdate"
   />
 </template>
@@ -75,4 +76,16 @@
   ::v-deep(.n-base-selection-input) {
     margin-right: 4px;
   }
+  ::v-deep(
+      .n-base-selection .n-base-selection__border,
+      .n-base-selection .n-base-selection__state-border
+    ) {
+    border-radius: 30px !important;
+  }
+  ::v-deep(.n-base-selection .n-base-selection-label) {
+    border-radius: 30px !important;
+  }
+  ::v-deep(.n-base-selection .n-base-selection__state-border) {
+    border-radius: 30px !important;
+  }
 </style>

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

@@ -34,17 +34,12 @@
 </script>
 
 <template>
-  <n-layout :class="isMobile ? 'flex flex-col gap-4' : ''" class="h-full w-full" has-sider>
-    <n-layout-sider
-      :collapsed-width="0"
-      :width="280"
-      bordered
-      collapse-mode="width"
-      show-trigger="arrow-circle"
-    >
+  <div :class="isMobile ? 'flex flex-col' : ''" class="h-full w-full flex">
+    <div :class="isMobile ? '' : 'w-[30%] border-r'">
       <FileList @select="onSelect" />
-    </n-layout-sider>
-    <div class="w-full h-full">
+    </div>
+
+    <div v-if="!isMobile" class="w-full h-full">
       <n-split
         :default-size="isMobile ? 0 : 0.6"
         :resize-trigger-size="0.5"
@@ -76,7 +71,30 @@
         </template>
       </n-split>
     </div>
-  </n-layout>
+
+    <div v-else>
+      <div class="w-full h-full border-t border-b py-4 mb-2">
+        <div
+          v-if="docStore.file.fileName"
+          class="text-gray-700 text-[17px] border-b px-2 font-bold h-12 flex justify-between items-center dark:text-white"
+        >
+          <div>{{ docStore.file.fileName }}.{{ docStore.file.type }}</div>
+        </div>
+        <n-empty
+          v-if="docStore.file.url === undefined"
+          :description="t('doc.previewEmpty')"
+          class="h-full w-full justify-center"
+        />
+        <template v-else>
+          <FileView :url="docStore.file.url" />
+        </template>
+      </div>
+
+      <div class="w-full h-full border-l dark:border-l-[#1e1e20]">
+        <Chat ref="chatRef" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="less" scoped></style>

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

@@ -21,7 +21,9 @@
   import ZhiPu from '@/views/modules/image/component/ZhiPu.vue';
   import { downloadByUrl } from '@/utils/downloadFile';
   import { t } from '@/locales';
+  import { useBasicLayout } from '@/hooks/useBasicLayout';
 
+  const { isMobile } = useBasicLayout();
   const image = ref<string>('');
   function onOk(data: any) {
     if (data.url !== undefined) {
@@ -35,32 +37,23 @@
 </script>
 
 <template>
-  <n-layout class="h-full w-full" has-sider>
-    <n-layout-sider
-      :collapsed-width="0"
-      :width="500"
-      bordered
-      collapse-mode="width"
-      show-trigger="arrow-circle"
-    >
-      <div class="flex justify-center items-center m-4 rounded">
-        <n-tabs type="segment">
-          <n-tab-pane display-directive="show" name="chap1" tab="OpenAI DALL·E">
+  <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="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">
             <DALL @ok="onOk" />
           </n-tab-pane>
           <n-tab-pane display-directive="show" name="chap2" tab="智谱AI">
             <ZhiPu @ok="onOk" />
           </n-tab-pane>
-          <n-tab-pane display-directive="show" name="chap3" tab="Mj & More...">
-            <n-empty description="更多文生图模型后续即将支持..." />
-          </n-tab-pane>
         </n-tabs>
       </div>
-    </n-layout-sider>
+    </div>
 
-    <div class="flex justify-center items-center w-full mt-4 dot-bg">
-      <div class="p-8 w-full h-full mb-14">
-        <div class="mb-2 flex flex-wrap justify-between items-center">
+    <div class="flex justify-center items-center w-full">
+      <div class="p-4 w-full h-full dot-bg flex flex-col">
+        <div class="flex flex-wrap justify-between items-center">
           <div class="font-bold flex justify-center items-center flex-wrap gap-2">
             <SvgIcon class="text-lg" icon="ion:sparkles-outline" />
             <span>图片预览</span>
@@ -74,12 +67,9 @@
             </n-button>
           </div>
         </div>
-        <div class="w-full h-full rounded-md p-2 flex items-center justify-center">
-          <div
-            v-if="image"
-            class="flex justify-center items-center"
-            style="height: calc(100vh - 20%)"
-          >
+
+        <div class="rounded-md flex items-center flex-1 justify-center">
+          <div v-if="image" class="flex justify-center items-center">
             <img :src="image" class="max-w-full max-h-full" />
           </div>
           <div v-else class="h-full w-full flex flex-col justify-center items-center gap-3">
@@ -90,7 +80,7 @@
         </div>
       </div>
     </div>
-  </n-layout>
+  </div>
 </template>
 
 <style lang="less" scoped></style>

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

@@ -21,7 +21,9 @@
   import { onMounted, watch } from 'vue';
   import { t } from '@/locales';
   import { downloadPdf, downloadPng, downloadSvg } from '@/utils/downloadFile';
+  import { useBasicLayout } from '@/hooks/useBasicLayout';
 
+  const { isMobile } = useBasicLayout();
   const props = defineProps<{
     genText: string;
   }>();
@@ -64,8 +66,11 @@
 </script>
 
 <template>
-  <div :class="genText == '' ? 'overflow-hidden' : ''" class="dot-bg w-full h-full">
-    <div class="absolute top-0 z-10 p-2 flex flex-wrap justify-center gap-2">
+  <div :class="genText == '' ? 'overflow-hidden' : ''" class="dot-bg w-full h-full relative">
+    <div
+      :class="isMobile ? 'block pb-6' : 'absolute'"
+      class="top-4 z-10 flex left-2 flex-wrap justify-center gap-2"
+    >
       <n-button text @click="onZoomIn">
         <SvgIcon class="text-2xl" icon="basil:zoom-in-outline" />
       </n-button>
@@ -101,7 +106,7 @@
       <div class="text-gray-400">{{ t('mindmap.titleDes') }}</div>
     </div>
 
-    <div id="mindmap-view" class="h-full w-full">
+    <div id="mindmap-view" :class="isMobile ? 'pb-6' : ''" class="h-full w-full">
       <svg id="mindmap" class="h-full w-full" />
     </div>
   </div>

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

@@ -18,7 +18,10 @@
   import { computed, ref, watch } from 'vue';
   import { SvgIcon } from '@/components/common';
   import { t } from '@/locales';
+  import ModelProvider from '@/views/modules/common/ModelProvider.vue';
+  import { useBasicLayout } from '@/hooks/useBasicLayout';
 
+  const { isMobile } = useBasicLayout();
   const props = defineProps<{
     loading: boolean;
     genText: string;
@@ -79,7 +82,13 @@
 </script>
 
 <template>
-  <div class="p-4">
+  <div :class="isMobile ? '' : 'w-[65%] border-r'" class="p-4 pt-2">
+    <div class="py-2 flex items-center justify-between gap-1">
+      <div class="text-nowrap">内容描述</div>
+
+      <ModelProvider />
+    </div>
+
     <n-input
       v-model:value="text"
       :disabled="loading"

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

@@ -22,9 +22,10 @@
   import { genMindMap } from '@/api/chat';
   import { isBlank } from '@/utils/is';
   import { t } from '@/locales';
-  import ModelProvider from '@/views/modules/common/ModelProvider.vue';
   import { useChatStore } from '@/views/modules/chat/store/useChatStore';
+  import { useBasicLayout } from '@/hooks/useBasicLayout';
 
+  const { isMobile } = useBasicLayout();
   const ms = useMessage();
   const loading = ref(false);
   const chatStore = useChatStore();
@@ -55,25 +56,11 @@
 </script>
 
 <template>
-  <n-layout class="w-full h-full" has-sider>
-    <n-layout-sider
-      :collapsed-width="1"
-      :native-scrollbar="false"
-      :width="400"
-      bordered
-      collapse-mode="width"
-      show-trigger="arrow-circle"
-    >
-      <div class="px-4 pt-2 flex items-center justify-between">
-        <div>{{ t('mindmap.des') }}</div>
-
-        <ModelProvider />
-      </div>
-      <Sider :genText="genText" :loading="loading" @generate="onGenerate" @render="onRender" />
-    </n-layout-sider>
+  <div :class="isMobile ? 'flex-col' : ''" class="w-full flex h-full">
+    <Sider :genText="genText" :loading="loading" @generate="onGenerate" @render="onRender" />
 
     <MindMap :genText="genText" :loading="loading" />
-  </n-layout>
+  </div>
 </template>
 
 <style lang="less" scoped></style>

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

@@ -22,7 +22,6 @@
   import mdKatex from '@traptitech/markdown-it-katex';
   import { ref } from 'vue';
   import { SvgIcon } from '@/components/common';
-  import Card from '@/views/modules/write/Card.vue';
   import { genWrite } from '@/api/chat';
   import { useMessage } from 'naive-ui';
   import { useChatStore } from '@/views/modules/chat/store/useChatStore';
@@ -85,31 +84,38 @@
 <template>
   <div :class="isMobile ? 'flex-col' : ''" class="flex gap-2 h-full">
     <div class="flex-1">
-      <div class="m-2 flex gap-2 items-center">
-        <ModelProvider />
+      <div :class="isMobile ? 'flex-col' : ''" class="m-2 flex gap-2 items-center">
         <n-input
           v-model:value="text"
           class="!rounded-3xl px-4 py-1"
           placeholder="请简单描述想要生成的文章内容"
         />
-        <n-button
-          :loading="loading"
-          class="!rounded-3xl"
-          size="large"
-          type="primary"
-          @click="onGenerate"
-        >
-          <template #icon>
-            <SvgIcon icon="mdi:sparkles-outline" />
-          </template>
-          生成
-        </n-button>
+        <div :class="isMobile ? 'w-full' : 'w-[40%] '" class="flex items-center gap-2">
+          <ModelProvider class="!rounded-4xl" size="large" />
+          <n-button
+            :loading="loading"
+            class="!rounded-3xl"
+            size="large"
+            type="primary"
+            @click="onGenerate"
+          >
+            <template #icon>
+              <SvgIcon icon="mdi:sparkles-outline" />
+            </template>
+            生成
+          </n-button>
+        </div>
       </div>
-      <Editor ref="editorRef" :text="genText" class="" />
-    </div>
-    <div class="w-1/3 h-full border-l">
-      <Card />
+      <Editor
+        ref="editorRef"
+        :style="isMobile ? 'height: calc(60vh)' : ''"
+        :text="genText"
+        class=""
+      />
     </div>
+    <!--    <div class="w-1/3 h-full border-l">-->
+    <!--      <Card />-->
+    <!--    </div>-->
   </div>
 </template>
 

langchat-ui/src/views/login/index.vue

@@ -111,7 +111,7 @@
           </n-form-item>
           <div class="login-animation4 mb-3">
             <div class="w-full flex justify-end gap-2">
-              <n-button text type="info" @click="onCodeLogin">验证码登录</n-button>
+              <!--              <n-button text type="info" @click="onCodeLogin">验证码登录</n-button>-->
               <n-button text type="info" @click="router.push(PageEnum.BASE_REGISTER)">
                 注册账号
               </n-button>