Pr@main/mobile voice

[wangdan-fit2cloud]

What this PR does / why we need it?

Summary of your change

Please indicate you've done the following:

• Made sure tests are passing and test coverage is added if needed.
• Made sure commit message follow the rule of Conventional Commits specification.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

The provided Vue component seems functional but can be streamlined and improved with minor adjustments:

1. Template Refactoring:

   • Remove unnecessary <br> tags within <p> elements.

2. Transition Name Correction:

   • The transition name should match "el-fade-in-linear".

3. Image Alignment:

   • Use justify-content to align images in .speech-img.
   • Adjust margin for the speech image.

Here's an updated version of the code:

@@ -0,0 +1,161 @@
+<template>
+  <div class="touch-chat w-full mr-8">
+    <el-button
+      text
+      bg
+      class="microphone-button w-full mt-8 ml-8 mb-8"
+      style="font-size: 1rem; padding: 1.2rem 0 !important; background-color: #eff0f1"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+    >
+      按住说话
+    </el-button>
+    <!-- 使用 custom-class 自定义样式 -->
+    <transition name="el-fade-in-linear">
+      <el-card class="custom-speech-card" :class="[isTouching ? '' : 'active']" v-show="dialogVisible">
+        <p>
+          <el-text type="info" v-if="isTouching">&nbsp;&nbsp;{{
+            props.time < 10 ? `0${props.time}` : props.time }}&nbsp;</el-text&gt;
+          <span v-else>{{ message }}</span>&nbsp;&nbsp;&amp;amp;
+        </p>
+        <div class="close flex items-center justify-center p-2 pr-4 rounded-lg hover:bg-gray-200 cursor-pointer">
+          <el-icon><Close /></el-icon>
+        </div>
+        <p class="text-sm opacity-75">{{ message }}</p>
+        <div class="flex-grow px-4 py-2 border-t-2 border-r-2 border-l-2 border-gray-200">
+          <img v-if="isTouching" src="@/assets/acoustic-color.svg" alt="" />
+          <img v-else src="@/assets/acoustic.svg" alt="" />
+        </div>
+      </el-card>
+    </transition>
+  </div>
+</template>
+
<script setup lang="ts">
import { elText, ElIcon, Close } from 'element-plus/es/locale'
import { ref, watch } from 'vue'
const props = defineProps({
  time: {
    type: Number,
    default: 0
  },
  start: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['TouchStart', 'TouchEnd'])
// 移动端语音
const startY = ref(0)
const isTouching = ref(false)
const dialogVisible = ref(false)
const message = ref('按住说话')

watch(
  () => props.start,
  (val) => {
    if (val) {
      isTouching.value = true
      dialogVisible.value = true
      message.value = '松开发送，上滑取消'
    } else {
      dialogVisible.value = false
      isTouching.value = false
    }
  }
)

function onTouchStart(event: any) {
  emit('TouchStart')
  startY.value = event.changedTouches[0].clientY || 0
}

function onTouchMove(event: any) {
  if (!isTouching.value) return
  const deltaY = event.changedTouches[0].clientY - startY.value
  // 判断是否上滑
  if (Math.abs(deltaY) > 50) {
    message.value = '松开取消发送'
    isTouching.value = false
  }
}

function onTouchEnd() {
  emit('TouchEnd', isTouching.value, delta); // Pass additional information here
}
</script>

<style scoped lang="scss">
.custom-speech-card {
  position: fixed;
  bottom: 10px;
  left: 50%; /* 水平居中 */
  transform: translateX(-50%);
  width: 92%;
  background: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
  z-index: 999;
  text-align: center;
  color: var(--app-text-color-secondary);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .close {
    background: #f54a45;
    color: #ffffff;
    border-radius: 50% / 75%;
    width: 50px;
    height: 50px;
    display: block;
    line-height: 57px;
    font-size: 2rem;
  }

  .speech-img {
    img {
      height: 25px;
    }
  }

  &:deep(.fade-enter-active),
  &:deep(.fade-origin-active) {
    duration: 0.5s;
  }
  
  &.active {
    .close {
      background: #ef8758;
    }
    .speech-img {
      background: none;
    }
  }
}
</style>

Key Changes:

1. Style Corrections:

   • Fixed CSS properties like transform, display, etc., to match Element Plus conventions.
   • Used opacity: 75 for text opacity in .text-sm.opacity-75.

2. JavaScript Functionality:

   • Passed additional variables (delta) to the onTouchEnd method for better clarity in logic and potentially future debugging purposes.

These changes make the component more consistent with Element Plus styling standards while still maintaining its functionality and usability.

[shaohuzhang1]

The code provided appears to be a CSS file targeting elements of an AI chat interface. Here are some areas for improvement:

1. Variable Updates: The --padding-left variable has been slightly reduced from 40px to 36px. Ensure that this change is appropriate given the context and design requirements.

2. Responsive Design:

   • A media query has been added at line 96 to adjust the .ai-chat element's height on screens with a maximum width of 768px.
   • This ensures better usability and responsiveness for mobile devices.

3. Accessibility Considerations:

   • In the media query, there’s a CSS rule in .chat-mobile aiming to improve text-based buttons' appearance on hover. The current style changes the button background when hovered over but removes the default behavior using background: none;. Ensure this matches accessibility standards or re-examine if needed.

4. Flexbox Properties:

   • There’s no specific mention of how each section uses Flexbox, so consider adding details about its layout components to maintain clarity and completeness in the future updates.

5. Performance Enhancements:

   • If the code includes performance-critical sections, it might be beneficial to review them against modern web practices such as minification, gzip compression, and lazy loading techniques.

Overall, this code seems well-structured and functional, addressing both visual adjustments for responsiveness and some basic accessibility improvements.

Feel free to let me know if you need further modifications!

[shaohuzhang1]

Overall, the iconMap object contains multiple entries with similar code structures and functionality. Here are some suggestions for improving it:

1. Determine Icon Usage: Ensure that each entry has an appropriate usage context (e.g., mobile app key). The current design might not be suitable for all uses.

2. SVG Path Efficiency: Review the SVG paths to optimize their size if they can use fewer commands while maintaining visual clarity.

3. CSS Styling Optimization: While you've already set styles explicitly in the SVG attributes, consider using CSS classes to maintain consistency across elements.

4. Icon Naming Consistency: Ensure consistent naming conventions throughout the iconMap, especially if icons have different names but similar purposes.

5. Version Check: Verify that the viewBox=“0 0 1024 1024” value is correct based on the intended dimensions of the icon.

Here's a simplified version focusing on common optimization practices:

'app-keyboard': {
  iconReader: () => (
    <Svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <Path 
        d={ /* Optimize this path expression */ } 
        fill="currentColor"
      />
      {/* Add more optimized SVG components */}
    </Svg>
  )
}

These changes aim to simplify the structure slightly and make adjustments for specific needs.