Merge branch 'beta' into 'master'

chore: 移动端应用页单位更换

See merge request !204

src/views/share/components/mobile/footer-input.vue

@@ -458,7 +458,7 @@ defineExpose({
 
 <template>
   <div class="my-[7px]">
-    <div class="flex items-end gap-2.5">
+    <div class="flex items-end gap-[10px]">
       <n-upload
         :show-file-list="false"
         accept=".doc, .pdf, .docx, .txt, .md"
@@ -478,11 +478,11 @@ defineExpose({
                 "
                 @click="handleSelectFile(handleClick)"
               >
-                <i class="iconfont icon-upload flex h-4 w-4 items-center justify-center" />
+                <i class="iconfont icon-upload flex h-[16px] w-[16px] items-center justify-center" />
               </div>
             </template>
 
-            <span class="text-xs"> {{ t('common_module.dialogue_module.upload_file_limit') }} </span>
+            <span class="text-[12px]"> {{ t('common_module.dialogue_module.upload_file_limit') }} </span>
           </n-popover>
         </n-upload-trigger>
       </n-upload>
@@ -505,11 +505,11 @@ defineExpose({
                 "
                 @click="handleSelectImage(handleClick)"
               >
-                <i class="iconfont icon-upload-image flex h-4 w-4 items-center justify-center" />
+                <i class="iconfont icon-upload-image flex h-[16px] w-[16px] items-center justify-center" />
               </div>
             </template>
 
-            <span class="text-xs"> {{ t('common_module.dialogue_module.upload_image_limit') }} </span>
+            <span class="text-[12px]"> {{ t('common_module.dialogue_module.upload_image_limit') }} </span>
           </n-popover>
         </n-upload-trigger>
       </n-upload>
@@ -536,11 +536,11 @@ defineExpose({
           <div
             v-for="uploadImageItem in uploadImageList"
             :key="uploadImageItem.id"
-            class="border-inactive-border-color relative mb-1.5 h-[48px] w-[48px] rounded-[10px] border bg-white"
+            class="border-inactive-border-color relative mb-[6px] h-[48px] w-[48px] rounded-[10px] border bg-white"
             :class="{ 'border-[#F25744]!': uploadImageItem.status === UploadStatus.ERROR }"
           >
             <div
-              class="absolute right-[-4px] top-[-4px] flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-[rgba(0,0,0,0.55)] hover:opacity-80"
+              class="absolute right-[-4px] top-[-4px] flex h-[16px] w-[16px] cursor-pointer items-center justify-center rounded-full bg-[rgba(0,0,0,0.55)] hover:opacity-80"
               @click="handleRemoveUploadImage(uploadImageItem.id)"
             >
               <CloseSmall theme="outline" size="16" fill="#fff" />
@@ -560,7 +560,7 @@ defineExpose({
           </div>
         </div>
 
-        <ul v-show="uploadFileList.length > 0" class="mb-1.5 grid gap-1.5">
+        <ul v-show="uploadFileList.length > 0" class="mb-[6px] grid gap-[6px]">
           <li
             v-for="uploadFileItem in uploadFileList"
             :key="uploadFileItem.id"
@@ -569,9 +569,9 @@ defineExpose({
           >
             <div class="flex w-full items-center justify-between">
               <div class="flex w-full items-center overflow-hidden">
-                <img :src="uploadFileIcon(uploadFileItem.type!)" class="h-6 w-6" />
+                <img :src="uploadFileIcon(uploadFileItem.type!)" class="h-[24px] w-[24px]" />
 
-                <div class="mx-2 flex flex-1 flex-col overflow-hidden text-[12px]">
+                <div class="mx-[8px] flex flex-1 flex-col overflow-hidden text-[12px]">
                   <n-ellipsis>
                     {{ uploadFileItem.name }}
                   </n-ellipsis>
@@ -580,7 +580,7 @@ defineExpose({
 
               <n-progress
                 v-show="!['finished', 'error'].includes(uploadFileItem.status)"
-                class="left-13.5 w-[calc(100%-78px)]! absolute bottom-0"
+                class="w-[calc(100%-78px)]! absolute bottom-0 left-[54px]"
                 type="line"
                 rail-color="#F3F3F3"
                 :height="4"
@@ -614,7 +614,7 @@ defineExpose({
             :autosize="{ minRows: 1, maxRows: 5 }"
             :placeholder="inputPlaceholder"
             :disabled="!isLogin || isInputMessageDisabled"
-            class="question-textarea rounded-xl! shadow-[0_1px_#09122105,0_1px_1px_#09122105,0_3px_3px_#09122103,0_9px_9px_#09122103]! bg-[#F2F2F2]! min-h-[35px] pr-[50px]"
+            class="question-textarea rounded-[20px]! shadow-[0_1px_#09122105,0_1px_1px_#09122105,0_3px_3px_#09122103,0_9px_9px_#09122103]! bg-[#F2F2F2]! min-h-[35px] pr-[50px]"
             @keydown="handleInputMessageEnter"
           />
           <div
@@ -634,10 +634,10 @@ defineExpose({
 
           <div
             v-show="!isLogin"
-            class="absolute left-3 top-[8px] flex h-[19px] max-w-[calc(100%-60px)] items-center overflow-hidden text-[12px] leading-[19px] text-[#84868c]"
+            class="absolute left-[12px] top-[8px] flex h-[19px] max-w-[calc(100%-60px)] items-center overflow-hidden text-[12px] leading-[19px] text-[#84868c]"
           >
             <span class="shrink-0">{{ t('share_agent_module.please') }}</span>
-            <span class="text-theme-color shrink-0 cursor-pointer px-1 hover:opacity-80" @click="handleToLogin">
+            <span class="text-theme-color shrink-0 cursor-pointer px-[4px] hover:opacity-80" @click="handleToLogin">
               {{ t('common_module.login') }}
             </span>
             <span class="shrink-0">{{ t('share_agent_module.after_action') }}</span>
@@ -647,7 +647,7 @@ defineExpose({
     </div>
 
     <div class="mt-[9px]">
-      <span class="flex w-full justify-center text-xs text-[#b8babf]">
+      <span class="flex w-full justify-center text-[12px] text-[#b8babf]">
         {{ t('common_module.dialogue_module.generate_warning_message') }}
       </span>
     </div>

src/views/share/components/mobile/message-item.vue

@@ -115,7 +115,7 @@ function handleShowReasoningContentSwitch() {
       <!-- 模型内容 -->
       <div class="flex min-w-[80px] max-w-full flex-col">
         <div
-          class="w-full flex-wrap rounded-xl border px-4 px-[12px] py-[11px]"
+          class="w-full flex-wrap rounded-[10px] border px-[12px] py-[11px]"
           :class="[
             { 'rounded-tr-none border-[#DCDEFF] bg-[#DCDEFF] text-white': role === 'user' },
             { 'rounded-tl-none border-[#e8e9eb] bg-white text-[#333]': role === 'assistant' },
@@ -146,7 +146,7 @@ function handleShowReasoningContentSwitch() {
             </span>
           </div>
 
-          <div v-if="messageItem.isTextContentLoading" class="py-1.5 pl-4">
+          <div v-if="messageItem.isTextContentLoading" class="py-[6px] pl-[16px]">
             <CustomLoading :active-color="'#000DFF'" />
           </div>
 
@@ -164,13 +164,16 @@ function handleShowReasoningContentSwitch() {
               />
             </p>
 
-            <div v-show="isShowVoiceLoading || messageItem.isAnswerResponseLoading" class="mb-[5px] mt-4 px-4">
+            <div
+              v-show="isShowVoiceLoading || messageItem.isAnswerResponseLoading"
+              class="mb-[5px] mt-[16px] px-[16px]"
+            >
               <CustomLoading :active-color="'#000DFF'" />
             </div>
           </div>
 
           <!-- 移动端语音播放 -->
-          <div v-show="isShowAudioControl" class="mt-[13px] flex items-center gap-2">
+          <div v-show="isShowAudioControl" class="mt-[13px] flex items-center gap-[8px]">
             <div
               class="h-[18px] w-[18px] cursor-pointer"
               :class="messageItem.isVoicePlaying ? 'bg-svg-pause' : 'bg-svg-play'"

src/views/share/components/mobile/message-list.vue

@@ -60,7 +60,7 @@ function handleScrollToBottom() {
 </script>
 
 <template>
-  <main ref="scrollRef" class="h-full overflow-y-auto overflow-x-hidden px-5" @scroll="throttleScrollContainer">
+  <main ref="scrollRef" class="h-full overflow-y-auto overflow-x-hidden px-[20px]" @scroll="throttleScrollContainer">
     <div>
       <MessageItem
         v-for="[key, messageItem] in messageList"
@@ -73,7 +73,7 @@ function handleScrollToBottom() {
       />
     </div>
 
-    <p v-show="isAnswerResponseLoading" class="my-[7px] ml-1 text-xs text-[#84868c]">
+    <p v-show="isAnswerResponseLoading" class="my-[7px] ml-[4px] text-[12px] text-[#84868c]">
       {{ t('common_module.dialogue_module.do_not_exit_page') }}
     </p>
 
@@ -83,10 +83,10 @@ function handleScrollToBottom() {
 
     <div
       v-show="visible"
-      class="flex-center hover:text-theme-color absolute bottom-5 right-5 h-6 w-6 cursor-pointer rounded-full bg-white shadow-[0_0_0_1px_#ededed]"
+      class="flex-center hover:text-theme-color absolute bottom-[20px] right-[20px] h-[24px] w-[24px] cursor-pointer rounded-full bg-white shadow-[0_0_0_1px_#ededed]"
       @click.stop="clickBackBottom"
     >
-      <i class="iconfont icon-left rotate-270 text-sm" />
+      <i class="iconfont icon-left rotate-270 text-[14px]" />
     </div>
   </main>
 </template>

src/views/share/components/mobile/page-header.vue

@@ -56,7 +56,7 @@ function handleToLogout() {
 <template>
   <header class="flex h-[58px] w-full items-center justify-between px-[20px]">
     <div>
-      <div v-show="isEnableVoice" class="flex items-center gap-2">
+      <div v-show="isEnableVoice" class="flex items-center gap-[8px]">
         <span class="text-[12px]">{{ t('common_module.voice_auto_play') }}</span>
         <n-switch
           v-model:value="answerAudioAutoPlay"
@@ -86,10 +86,10 @@ function handleToLogout() {
       <NButton
         v-show="!isLogin"
         color="#EBECFF"
-        class="rounded-md! h-[28]! text-[12px]! min-w-[80px]! text-theme-color!"
+        class="rounded-md! h-[28px]! text-[12px]! min-w-[80px]! text-theme-color!"
         @click="handleToLogin"
       >
-        <span class="text-xs"> {{ t('common_module.login_now') }}</span>
+        {{ t('common_module.login_now') }}
       </NButton>
 
       <div v-show="isLogin" class="flex-center h-[28px] w-[28px] rounded-[5px] bg-[#EBECFF]">

src/views/share/share-application-mobile.vue

@@ -406,14 +406,14 @@ function handleToLogoutPage() {
             :is-answer-response-loading="isAnswerResponseLoading"
             :create-continue-questions-exception="createContinueQuestionsException"
             :is-answer-response-interrupt="isAnswerResponseInterrupt"
-            class="pt-5"
+            class="pt-[20px]"
             @audio-play="handleAudioPlay"
             @audio-pause="handleAudioPause"
           />
         </div>
       </div>
 
-      <div class="footer-operation bg-white px-4">
+      <div class="footer-operation bg-white px-[16px]">
         <FooterInput
           ref="footerInputRef"
           v-model:is-answer-response-loading="isAnswerResponseLoading"