From 367d49a6cf9d9bd79b9612d529e78acb8189eda8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Fri, 17 Oct 2025 09:49:30 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=A7=A6=E5=BA=95?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MyList.vue | 1 + src/views/Workshop/library.vue | 215 ++++++++++++++++++--------------- 2 files changed, 116 insertions(+), 100 deletions(-) diff --git a/src/components/MyList.vue b/src/components/MyList.vue index da37082..8a48138 100644 --- a/src/components/MyList.vue +++ b/src/components/MyList.vue @@ -42,6 +42,7 @@ font-size: 3rem; color: #000; text-align: center; + margin: var(--my-list-footer-margin, 0); > .placeholder { height: 1px; } diff --git a/src/views/Workshop/library.vue b/src/views/Workshop/library.vue index d3c8009..c7593b8 100644 --- a/src/views/Workshop/library.vue +++ b/src/views/Workshop/library.vue @@ -2,24 +2,31 @@ import { ref, reactive, onMounted, inject } from 'vue' import HeaderTitle from '@/components/HeaderTitle.vue' import FooterNavigation from '@/components/FooterNavigation.vue' + import MyList from '@/components/myList.vue' const emit = defineEmits(['view-type']) onMounted(() => { emit('view-type', 1) }) + const loading = ref(false) + const finish = ref(false) + const list = reactive([]) - const list = reactive([ - { id: 1, userID: '1111111111', datetime: '7/22/2025 18:20', lastopened: '18:20' }, - { id: 2, userID: '2222222222', datetime: '7/22/2025 18:20', lastopened: '18:20' }, - { id: 3, userID: '3333333333', datetime: '7/22/2025 18:20', lastopened: '18:20' }, - { id: 4, userID: '4444444444', datetime: '7/22/2025 18:20', lastopened: '18:20' }, - { id: 5, userID: '5555555555', datetime: '7/22/2025 18:20', lastopened: '18:20' }, - { id: 6, userID: '6666666666', datetime: '7/22/2025 18:20', lastopened: '18:20' }, - { id: 7, userID: '7777777777', datetime: '7/22/2025 18:20', lastopened: '18:20' }, - { id: 8, userID: '8888888888', datetime: '7/22/2025 18:20', lastopened: '18:20' }, - { id: 9, userID: '9999999999', datetime: '7/22/2025 18:20', lastopened: '18:20' }, - { id: 10, userID: '0000000000', datetime: '7/22/2025 18:20', lastopened: '18:20' } - ]) + const onLoad = () => { + loading.value = true + setTimeout(() => { + for (var i = 0; i < 10; i++) { + list.push({ + id: list.length + 1, + userID: 10000000 + list.length, + datetime: '7/22/2025 18:20', + lastopened: '18:20' + }) + } + loading.value = false + if (list.length >= 50) finish.value = true + }, 1500) + } const onRetrieveItem = (i: number) => { console.log('检索' + i) } @@ -34,18 +41,20 @@
Library
-
-
- + +
+
+ +
+
+ User ID: {{ v.userID }} + {{ v.datetime }} + Last opened {{ v.lastopened }} + +
+
-
- User ID: {{ v.userID }} - {{ v.datetime }} - Last opened {{ v.lastopened }} - -
-
-
+
@@ -88,93 +97,99 @@ } > .list { flex: 1; - overflow-y: auto; - padding: 0 3.8rem; + overflow: hidden; margin: 0 3rem; - > .item { - position: relative; - padding: 2.8rem; - width: 100%; - height: 34.4rem; - border-radius: 1.88rem; - margin-bottom: 7.66rem; - background-color: #f3f3f3; - display: flex; - align-items: center; - > .image { - width: 21.4rem; - height: 100%; - overflow: hidden; - border-radius: 2rem; - background-color: #fff; - > img { - width: 100%; - height: 100%; - object-fit: contain; - } - } - > .content { - margin-left: 5.6rem; + > .my-list { + padding: 0 3.8rem; + --my-list-footer-margin: 2rem 0; + > .item { + position: relative; + padding: 2.8rem; + width: 100%; + height: 34.4rem; + border-radius: 1.88rem; + background-color: #f3f3f3; display: flex; - flex-direction: column; - height: 90%; - > .userID { - font-family: satoshiRegular; - font-weight: 500; - font-size: 3.8rem; - line-height: 89%; - color: #000; + align-items: center; + margin-top: 7.66rem; + &:first-child { + margin-top: 0; } - > .datetime { - margin-top: 1.8rem; - font-family: satoshiRegular; - font-weight: 400; - font-size: 3.2rem; - line-height: 89%; - color: #000; + > .image { + width: 21.4rem; + height: 100%; + overflow: hidden; + border-radius: 2rem; + background-color: #fff; + > img { + width: 100%; + height: 100%; + object-fit: contain; + } } - > .lastopened { - margin-top: 1rem; - font-family: satoshiRegular; - font-weight: 400; - font-style: Regular; - font-size: 2.6rem; - line-height: 89%; - color: #6f6f6f; + > .content { + margin-left: 5.6rem; + display: flex; + flex-direction: column; + height: 90%; + > .userID { + font-family: satoshiRegular; + font-weight: 500; + font-size: 3.8rem; + line-height: 89%; + color: #000; + } + > .datetime { + margin-top: 1.8rem; + font-family: satoshiRegular; + font-weight: 400; + font-size: 3.2rem; + line-height: 89%; + color: #000; + } + > .lastopened { + margin-top: 1rem; + font-family: satoshiRegular; + font-weight: 400; + font-style: Regular; + font-size: 2.6rem; + line-height: 89%; + color: #6f6f6f; + } + > button { + margin-top: auto; + width: 12.3rem; + height: 3.8rem; + border-radius: 0.5rem; + box-sizing: content-box; + border: 0.193rem solid #000; + background: transparent; + font-family: satoshiRegular; + font-weight: 400; + font-size: 2.576rem; + color: #000; + margin-right: 5rem; + &:active { + opacity: 0.7; + } + } } - > button { - margin-top: auto; - width: 12.3rem; - height: 3.8rem; - border-radius: 0.5rem; - box-sizing: content-box; - border: 0.193rem solid #000; - background: transparent; - font-family: satoshiRegular; - font-weight: 400; - font-size: 2.576rem; - color: #000; - margin-right: 5rem; + > .delete { + position: absolute; + top: 2.5rem; + right: 2rem; + width: 5.5rem; + height: 5.5rem; + border: 0.188rem solid #000; + border-radius: 1.88rem; + display: flex; + align-items: center; + justify-content: center; &:active { opacity: 0.7; } } } - > .delete { - position: absolute; - top: 2.5rem; - right: 2rem; - width: 5.5rem; - height: 5.5rem; - border: 0.188rem solid #000; - border-radius: 1.88rem; - display: flex; - align-items: center; - justify-content: center; - &:active { - opacity: 0.7; - } - } } } } From 8994b4a1d27c0a99466752554a6f675675160aca Mon Sep 17 00:00:00 2001 From: zhangyh Date: Fri, 17 Oct 2025 17:09:33 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=AF=AD?= =?UTF-8?q?=E9=9F=B3=E8=BE=93=E5=85=A5=E6=97=B6=E7=9A=84=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=92=8C=E8=BE=93=E5=85=A5=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../asistant/components/AudioVisualizer.vue | 59 ++++++++++++- src/views/asistant/components/InputArea.vue | 83 +++++++++++++++---- src/views/asistant/index.vue | 24 +----- src/views/stylist/index.vue | 60 ++++++-------- 4 files changed, 147 insertions(+), 79 deletions(-) diff --git a/src/views/asistant/components/AudioVisualizer.vue b/src/views/asistant/components/AudioVisualizer.vue index e3b3de4..f983c8a 100644 --- a/src/views/asistant/components/AudioVisualizer.vue +++ b/src/views/asistant/components/AudioVisualizer.vue @@ -1,7 +1,13 @@ @@ -17,12 +23,17 @@ interface Line { const containerRef = ref() const visualizerRef = ref() const lines = ref([]) +const isInitialized = ref(false) +let resizeObserver: ResizeObserver | null = null // 计算需要的线条数量 const calculateLines = (): Line[] => { if (!visualizerRef.value) return [] const containerWidth = visualizerRef.value.offsetWidth + + // 如果容器宽度为0或很小，说明还没有正确渲染，返回空数组 + if (containerWidth < 50) return [] const lineWidth = 0.96 // 每条线的宽度 (rem) const gap = 0.96 // 线条之间的间距 (rem) @@ -66,7 +77,7 @@ const calculateLines = (): Line[] => { // 生成一个完整周期的内容 const oneCycle: Line[] = [] oneCycle.push(...basePattern) - + // 添加重复模式直到填满一个周期 let currentIndex = basePattern.length while (currentIndex < linesNeeded) { @@ -91,9 +102,18 @@ const calculateLines = (): Line[] => { // 更新线条 const updateLines = () => { - lines.value = calculateLines() + const newLines = calculateLines() + if (newLines.length > 0) { + lines.value = newLines + isInitialized.value = true + } } +// 暴露方法给父组件 +defineExpose({ + updateLines +}) + // 监听窗口大小变化 const handleResize = () => { updateLines() @@ -101,12 +121,45 @@ const handleResize = () => { onMounted(async () => { await nextTick() + + // 立即尝试第一次更新 updateLines() + + // 如果第一次没有成功，快速重试 + setTimeout(() => { + if (!isInitialized.value) { + updateLines() + } + }, 50) + + // 最后的备用尝试 + setTimeout(() => { + if (!isInitialized.value) { + updateLines() + } + }, 150) + + // 使用ResizeObserver监听容器大小变化，更精确地检测初始化时机 + if (visualizerRef.value && window.ResizeObserver) { + resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { + if (entry.contentRect.width > 50 && !isInitialized.value) { + updateLines() + } + } + }) + resizeObserver.observe(visualizerRef.value) + } + window.addEventListener('resize', handleResize) }) onUnmounted(() => { window.removeEventListener('resize', handleResize) + if (resizeObserver) { + resizeObserver.disconnect() + resizeObserver = null + } }) diff --git a/src/views/asistant/components/InputArea.vue b/src/views/asistant/components/InputArea.vue index a04ffdc..b341d4b 100644 --- a/src/views/asistant/components/InputArea.vue +++ b/src/views/asistant/components/InputArea.vue @@ -21,18 +21,20 @@
- + @keydown="handleKeyDown" + @input="handleInput" + ref="textareaRef" + >
- +
@@ -51,13 +53,16 @@ @@ -170,7 +143,6 @@ onUnmounted(() => { justify-content: center; align-items: center; padding: 20px; - min-height: 200px; border-radius: 10px; } diff --git a/src/views/asistant/components/InputArea.vue b/src/views/asistant/components/InputArea.vue index b341d4b..331045d 100644 --- a/src/views/asistant/components/InputArea.vue +++ b/src/views/asistant/components/InputArea.vue @@ -13,7 +13,8 @@
- + +
@@ -97,12 +98,12 @@ const handleInput = (): void => { if (textareaRef.value) { textareaRef.value.style.height = 'auto' - // const lineHeight = 4.8 + // const lineHeight = 4.8 // const maxLines = 3 // const maxHeight = lineHeight * maxLines const scrollHeight = textareaRef.value.scrollHeight - // const newHeight = Math.min(scrollHeight, maxHeight * 10) + // const newHeight = Math.min(scrollHeight, maxHeight * 10) textareaRef.value.style.height = `${scrollHeight}px` } @@ -138,9 +139,6 @@ const handleClickAudio = async (): Promise => { audioVisualizerRef.value.updateLines?.() } }, 50) - } - - if (isRecording.value) { startRecording() } else { stopRecording() @@ -174,7 +172,7 @@ const startRecording = () => { } // 识别结果 - speechRecognition.onresult = (event) => { + speechRecognition.onresult = (event: any) => { let finalTranscript = '' let interimTranscript = '' @@ -213,7 +211,7 @@ const startRecording = () => { } // 识别错误 - speechRecognition.onerror = (event) => { + speechRecognition.onerror = (event: any) => { console.error('语音识别错误:', event.error) isRecording.value = false // alert('语音识别失败，请重试') @@ -273,6 +271,7 @@ const stopRecording = () => { align-items: center; justify-content: center; cursor: pointer; + color: #6d6868; &.send-icon { margin-left: 4.38rem;