按钮文字放大
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 1m56s
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 1m56s
This commit is contained in:
libingxiang
parent
3b280eb579
commit
bfde0250e3
128
src/App.vue
128
src/App.vue
@ -100,8 +100,8 @@
|
||||
<svg
|
||||
v-if="pickPhase === 'recording'"
|
||||
viewBox="0 0 24 24"
|
||||
width="26"
|
||||
height="26"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
@ -118,8 +118,8 @@
|
||||
v-else-if="pickPhase === 'processing'"
|
||||
class="anim-dots"
|
||||
viewBox="0 0 24 24"
|
||||
width="26"
|
||||
height="26"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
@ -159,8 +159,8 @@
|
||||
v-else-if="pickPhase === 'waiting'"
|
||||
class="anim-ellipsis"
|
||||
viewBox="0 0 24 24"
|
||||
width="26"
|
||||
height="26"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
@ -197,8 +197,8 @@
|
||||
v-else-if="pickPhase === 'broadcasting'"
|
||||
class="anim-wave"
|
||||
viewBox="0 0 24 24"
|
||||
width="26"
|
||||
height="26"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
@ -217,8 +217,8 @@
|
||||
<svg
|
||||
v-else
|
||||
viewBox="0 0 24 24"
|
||||
width="26"
|
||||
height="26"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
@ -268,8 +268,8 @@
|
||||
<svg
|
||||
v-if="pickPhase === 'idle' && !isMuted"
|
||||
viewBox="0 0 24 24"
|
||||
width="26"
|
||||
height="26"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
@ -286,8 +286,8 @@
|
||||
v-else-if="pickPhase === 'processing'"
|
||||
class="anim-dots"
|
||||
viewBox="0 0 24 24"
|
||||
width="26"
|
||||
height="26"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
@ -327,8 +327,8 @@
|
||||
v-else-if="pickPhase === 'waiting'"
|
||||
class="anim-ellipsis"
|
||||
viewBox="0 0 24 24"
|
||||
width="26"
|
||||
height="26"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
@ -365,8 +365,8 @@
|
||||
v-else-if="pickPhase === 'broadcasting'"
|
||||
class="anim-wave"
|
||||
viewBox="0 0 24 24"
|
||||
width="26"
|
||||
height="26"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
@ -385,8 +385,8 @@
|
||||
<svg
|
||||
v-else
|
||||
viewBox="0 0 24 24"
|
||||
width="26"
|
||||
height="26"
|
||||
width="30"
|
||||
height="30"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
@ -414,8 +414,8 @@
|
||||
<button class="interrupt-btn interrupt-bottom-right" @click="dhInterrupt">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
width="28"
|
||||
height="28"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
@ -773,9 +773,9 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
/* ===== 拾音按钮 ===== */
|
||||
.mic-btn {
|
||||
flex-shrink: 0;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 30px;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 36px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.15);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(12px);
|
||||
@ -785,15 +785,16 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
transition: all 0.25s ease;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: manipulation;
|
||||
|
||||
.mic-label {
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@ -812,7 +813,7 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
box-shadow: 0 0 40px rgba(239, 68, 68, 0.3);
|
||||
|
||||
.mic-label {
|
||||
color: #f87171;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -824,7 +825,7 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
box-shadow: 0 0 32px rgba(52, 211, 153, 0.25);
|
||||
|
||||
.mic-label {
|
||||
color: #34d399;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -836,7 +837,7 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
opacity: 1;
|
||||
|
||||
.mic-label {
|
||||
color: rgba(239, 68, 68, 0.8);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -847,7 +848,7 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
box-shadow: 0 0 24px rgba(96, 165, 250, 0.2);
|
||||
|
||||
.mic-label {
|
||||
color: #60a5fa;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -859,7 +860,7 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
box-shadow: 0 0 24px rgba(245, 158, 11, 0.2);
|
||||
|
||||
.mic-label {
|
||||
color: #fbbf24;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -871,7 +872,7 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
box-shadow: 0 0 24px rgba(52, 211, 153, 0.2);
|
||||
|
||||
.mic-label {
|
||||
color: #34d399;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -1017,9 +1018,9 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
/* ===== 打断按钮 ===== */
|
||||
.interrupt-btn {
|
||||
flex-shrink: 0;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 30px;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 36px;
|
||||
border: 2px solid rgba(251, 146, 60, 0.35);
|
||||
background: rgba(251, 146, 60, 0.12);
|
||||
backdrop-filter: blur(12px);
|
||||
@ -1029,15 +1030,16 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
transition: all 0.25s ease;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: manipulation;
|
||||
|
||||
.interrupt-label {
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
@ -1138,17 +1140,17 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
}
|
||||
|
||||
.mic-btn {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 20px;
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
border-radius: 24px;
|
||||
|
||||
.mic-label {
|
||||
font-size: 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mic-btn-ring {
|
||||
border-radius: 20px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.interrupt-bottom-right {
|
||||
@ -1166,12 +1168,12 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
}
|
||||
|
||||
.interrupt-btn {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 20px;
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
border-radius: 24px;
|
||||
|
||||
.interrupt-label {
|
||||
font-size: 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1232,13 +1234,13 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
}
|
||||
|
||||
.mic-btn {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 22px;
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.mic-btn-ring {
|
||||
border-radius: 22px;
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.interrupt-bottom-right {
|
||||
@ -1256,9 +1258,9 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
}
|
||||
|
||||
.interrupt-btn {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 22px;
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.hangup-top-left {
|
||||
@ -1320,17 +1322,17 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
}
|
||||
|
||||
.mic-btn {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 18px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 22px;
|
||||
|
||||
.mic-label {
|
||||
font-size: 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mic-btn-ring {
|
||||
border-radius: 18px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.interrupt-bottom-right {
|
||||
@ -1348,12 +1350,12 @@ async function handleVoiceQueryComplete(text: string) {
|
||||
}
|
||||
|
||||
.interrupt-btn {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 18px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 22px;
|
||||
|
||||
.interrupt-label {
|
||||
font-size: 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick } from "vue";
|
||||
import {ref, watch, nextTick, onMounted} from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
aiSubtitle: string;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user