Optimize types

packages/gpt-runner-web/client/src/components/form-title/form-title.styles.ts

@@ -1,10 +1,21 @@
 import styled from 'styled-components'
+import type { CSSProperties } from 'react'
 
-export const FormTitleWrapper = styled.div`
+export enum FormTitleSize {
+  Normal = 'normal',
+  Large = 'large',
+}
+
+const sizeFontSizeMap: Record<FormTitleSize, CSSProperties['fontSize']> = {
+  [FormTitleSize.Normal]: '1rem',
+  [FormTitleSize.Large]: '1.2rem',
+}
+
+export const FormTitleWrapper = styled.div<{ $size: `${FormTitleSize}` }>`
   padding-left: 0.5rem;
   margin: 1rem;
   margin-bottom: 0;
-  font-size: 1rem;
+  font-size: ${({ $size }) => sizeFontSizeMap[$size]};
   font-weight: bold;
   border-left: 0.25rem solid var(--foreground);
 `

packages/gpt-runner-web/client/src/components/form-title/index.tsx

@@ -1,18 +1,24 @@
 import type { FC } from 'react'
 import { memo } from 'react'
-import { FormTitleWrapper } from './form-title.styles'
+import { FormTitleSize, FormTitleWrapper } from './form-title.styles'
+
+export { FormTitleSize }
+
+type SizeValues = `${FormTitleSize}`
 
 export interface FormTitleProps {
+  size?: SizeValues
   style?: React.CSSProperties
   children: React.ReactNode
 }
 
 export const FormTitle: FC<FormTitleProps> = memo(({
+  size = FormTitleSize.Normal,
   style,
   children,
 }) => {
   return (
-    <FormTitleWrapper style={style}>
+    <FormTitleWrapper style={style} $size={size}>
       {children}
     </FormTitleWrapper>
   )

packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx

@@ -72,15 +72,15 @@ export const Settings: FC<SettingsProps> = memo((props) => {
 
   const renderOverrideSetting = () => {
     return <ConfigInfoWrapper>
-      <FormTitle style={{ fontSize: '1.2rem' }}>
+      <FormTitle size="large">
         {t('chat_page.settings_general')}
       </FormTitle>
       <GeneralSettings></GeneralSettings>
-      <FormTitle style={{ fontSize: '1.2rem' }}>
+      <FormTitle size="large">
         {t('chat_page.settings_proxy')}
       </FormTitle>
       <ProxySettings></ProxySettings>
-      <FormTitle style={{ fontSize: '1.2rem' }}>
+      <FormTitle size="large">
         <ModelSettings userConfig={userConfig} singleFileConfig={singleFileConfig} viewType='title'></ModelSettings>
         {` ${t('chat_page.settings_config')}`}
       </FormTitle>
@@ -90,7 +90,7 @@ export const Settings: FC<SettingsProps> = memo((props) => {
 
   const renderGlobalConfigInfo = () => {
     return <ConfigInfoWrapper>
-      <FormTitle style={{ fontSize: '1.2rem' }}>
+      <FormTitle size="large">
         gptr.config.json
       </FormTitle>
       <MessageCodeBlock theme={codeBlockTheme} language='json' contents={globalConfigInfo}></MessageCodeBlock>
@@ -99,7 +99,7 @@ export const Settings: FC<SettingsProps> = memo((props) => {
 
   const renderSingleFileConfigInfo = () => {
     return <ConfigInfoWrapper>
-      <FormTitle style={{ fontSize: '1.2rem' }}>
+      <FormTitle size="large">
         {gptFileName}
       </FormTitle>
       <MessageCodeBlock theme={codeBlockTheme} language='json' contents={singleFileConfigInfo}></MessageCodeBlock>