feat: 样式调整

.gitignore

@@ -19,3 +19,4 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+.vercel

src/components/Footer.astro

@@ -2,6 +2,6 @@
 ---
 
 <footer class='p-8 mb-4 flex justify-center items-center'>
-  footer
+  <!-- footer -->
 </footer>
 

src/components/Ribbon/RoleCard.tsx

@@ -1,5 +1,6 @@
 import { type Component } from 'solid-js'
 import cx from 'classnames'
+import { Gender } from '@/core/types'
 import type { EdgeVoice } from '@/core/types'
 import { getLabelName } from '@/core/config'
 import { synthesis } from '@/core/index'
@@ -22,7 +23,7 @@ const RoleCard: Component<Props> = (props) => {
   return (
     <div onClick={() => props.onClick(props.roleInfo.ShortName)} class={cx('rounded border border-base px-3 py-2 text-sm', props.selected ? 'bg-active' : '')}>
       <div class='flex gap-3 items-center'>
-        <div class='rounded-full w-6 h-6 bg-gray-200' />
+        <div class={cx('rounded-full w-6 h-6', props.roleInfo.Gender === Gender.Female ? 'bg-pink-300' : 'bg-gray-300') } />
         <div class={cx(props.selected ? '' : 'opacity-75')}>{getLabelName(props.roleInfo.ShortName)}</div>
       </div>
       <button

src/components/Ribbon/SoundSynthetic.tsx

@@ -21,7 +21,8 @@ const SoundSynthetic = () => {
           <div
             class='border border-base h-full w-full p-16 resize-none rounded flex flex-col gap-8 items-center justify-center'
           >
-            <div class='text-8xl'>🎉</div>
+            {/* <div class='text-8xl'>🥳</div> */}
+            <div class='text-3xl'><img src='/2.png' alt='' /></div>
             <h2>文本合成语音文件成功!</h2>
             <audio
               src={globalState().audioUrl}
@@ -38,7 +39,7 @@ const SoundSynthetic = () => {
         : <textarea
             value={globalState().preText}
             onInput={({ target: { value } }) => setGlobalState({ ...globalState(), preText: value })}
-            class='base-input text-lg h-full w-full p-4 resize-none rounded'
+            class='base-textarea text-lg h-full w-full p-4 resize-none rounded'
             placeholder='输入要合成的文本'
           />
     }

src/core/types.ts

@@ -1,5 +1,10 @@
 import type { LangCode } from './config'
 
+export enum Gender {
+  Male = 'Male',
+  Female = 'Female'
+}
+
 export interface SpeakOptions {
   text: string
   lang?: LangCode
@@ -13,7 +18,7 @@ export interface SpeakOptions {
 
 export interface EdgeVoice {
   FriendlyName: string
-  Gender: string
+  Gender: Gender
   Locale: string
   ShortName: string
   Name: string

src/pages/index.astro

@@ -13,7 +13,7 @@ import Ribbon from '@/components/Ribbon'
     <main class='flex-1'>
       <Ribbon client:only />
     </main>
-    <!-- <Footer /> -->
+    <Footer />
   </div>
 </Layout>
 

src/style/tailwind.css

@@ -43,5 +43,9 @@
   .base-input{
     @apply dark:placeholder-gray-400/30 focus:opacity-100 opacity-75 dark:bg-[#000]/5 border-base dark:text-gray-300 placeholder-gray-300 block box-border w-full rounded-md shadow-sm transition-all  focus:bg-[#fff]/60 dark:focus:bg-[#f3f3f3]/5 focus:shadow-md outline-none focus:ring-[#eceef0] dark:focus:ring-[#eceef0]/60 focus:ring-1 border   text-sm px-4 py-2
   }
+
+  .base-textarea{
+    @apply base-input dark:placeholder-gray-400/50 placeholder-gray-400 
+  }
 }