From f0decb4b1b741483fc9d224890097d6ed328d19e Mon Sep 17 00:00:00 2001
From: anig1scur <anigiscur@gmail.com>
Date: Thu, 31 Oct 2024 12:20:19 +0800
Subject: [PATCH] chore: remove border

---
 src/components/ThemeConfigForm.tsx | 95 +++---------------------------
 src/components/ThemePreview.tsx    |  7 +--
 src/lib/theme.ts                   |  4 --
 src/types/theme.ts                 |  6 --
 4 files changed, 10 insertions(+), 102 deletions(-)

diff --git a/src/components/ThemeConfigForm.tsx b/src/components/ThemeConfigForm.tsx
index 5a2bcf8..8036351 100644
--- a/src/components/ThemeConfigForm.tsx
+++ b/src/components/ThemeConfigForm.tsx
@@ -79,84 +79,6 @@ const MarginFields = ({ control, name, label }: MarginFieldsProps) => (
   </div>
 );
 
-interface BackgroundFieldsProps {
-  control: any;
-  name: string;
-  label: string;
-}
-
-const BackgroundFields = ({ control, name, label }: BackgroundFieldsProps) => (
-  <Card>
-    <CardHeader>
-      <CardTitle>{ label }</CardTitle>
-    </CardHeader>
-    <CardContent className="space-y-4 flex items-baseline gap-12">
-      <FormField
-        control={ control }
-        name={ `${ name }.color` }
-        render={ ({ field }) => (
-          <FormItem>
-            <FormLabel>背景颜色</FormLabel>
-            <FormControl>
-              <Input type="color" { ...field } className="h-10 w-20" />
-            </FormControl>
-          </FormItem>
-        ) }
-      />
-      <FormField
-        control={ control }
-        name={ `${ name }.borderColor` }
-        render={ ({ field }) => (
-          <FormItem>
-            <FormLabel>边框颜色</FormLabel>
-            <FormControl>
-              <Input type="color" { ...field } className="h-10 w-20" />
-            </FormControl>
-          </FormItem>
-        ) }
-      />
-      <FormField
-        control={ control }
-        name={ `${ name }.borderWidth` }
-        render={ ({ field }) => (
-          <FormItem>
-            <FormLabel>边框宽度 ({ field.value }px)</FormLabel>
-            <FormControl>
-              <Slider
-                min={ 0 }
-                max={ 10 }
-                step={ 1 }
-                value={ [field.value] }
-                onValueChange={ (value) => field.onChange(value[0]) }
-              />
-            </FormControl>
-          </FormItem>
-        ) }
-      />
-      {/* <FormField
-        control={control}
-        name={`${name}.gravity`}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>叠加层位置</FormLabel>
-            <Select onValueChange={field.onChange} value={field.value}>
-              <SelectTrigger>
-                <SelectValue placeholder="选择位置" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="Top Left">左上</SelectItem>
-                <SelectItem value="Top Right">右上</SelectItem>
-                <SelectItem value="Bottom Left">左下</SelectItem>
-                <SelectItem value="Bottom Right">右下</SelectItem>
-              </SelectContent>
-            </Select>
-          </FormItem>
-        )}
-      /> */}
-      {/* <MarginFields control={control} name={`${name}.margin`} label="边距设置" /> */ }
-    </CardContent>
-  </Card>
-);
 
 interface ThemeConfigFormProps {
   initialConfig: ThemeConfig;
@@ -248,10 +170,10 @@ export function ThemeConfigForm({ initialConfig, onConfigChange, onConfigExport
               />
               <FormField
                 control={ form.control }
-                name="highlightColor"
+                name={ `background.color` }
                 render={ ({ field }) => (
                   <FormItem>
-                    <FormLabel>高亮文字颜色</FormLabel>
+                    <FormLabel>背景颜色</FormLabel>
                     <FormControl>
                       <Input type="color" { ...field } className="h-10 w-20" />
                     </FormControl>
@@ -260,22 +182,23 @@ export function ThemeConfigForm({ initialConfig, onConfigChange, onConfigExport
               />
               <FormField
                 control={ form.control }
-                name="highlightBackgroundColor"
+                name="highlightColor"
                 render={ ({ field }) => (
                   <FormItem>
-                    <FormLabel>高亮背景颜色</FormLabel>
+                    <FormLabel>高亮文字颜色</FormLabel>
                     <FormControl>
                       <Input type="color" { ...field } className="h-10 w-20" />
                     </FormControl>
                   </FormItem>
                 ) }
               />
+
               <FormField
                 control={ form.control }
-                name="highlightCandidateColor"
+                name={ `highlight.color` }
                 render={ ({ field }) => (
                   <FormItem>
-                    <FormLabel>候选词高亮颜色</FormLabel>
+                    <FormLabel>高亮背景颜色</FormLabel>
                     <FormControl>
                       <Input type="color" { ...field } className="h-10 w-20" />
                     </FormControl>
@@ -355,10 +278,6 @@ export function ThemeConfigForm({ initialConfig, onConfigChange, onConfigExport
           </CardContent>
         </Card> */}
 
-        {/* Background and Highlight */ }
-        <BackgroundFields control={ form.control } name="background" label="背景设置" />
-        <BackgroundFields control={ form.control } name="highlight" label="高亮设置" />
-
         <div className="flex justify-end">
           <Button onClick={ exportTheme }>导出主题</Button>
         </div>
diff --git a/src/components/ThemePreview.tsx b/src/components/ThemePreview.tsx
index 22de6ca..7fd3ff2 100644
--- a/src/components/ThemePreview.tsx
+++ b/src/components/ThemePreview.tsx
@@ -8,8 +8,7 @@ interface ThemePreviewProps {
 export function ThemePreview({ config, direction = 'vertical' }: ThemePreviewProps) {
   const inputPanelStyle = {
     backgroundColor: config.background.color,
-    border: `${ config.background.borderWidth }px solid ${ config.background.borderColor }`,
-    margin: '20px',
+    marginBottom: '20px',
     width: direction === 'vertical' ? '300px' : 'fit-content',
     position: 'relative' as const,
   };
@@ -33,8 +32,8 @@ export function ThemePreview({ config, direction = 'vertical' }: ThemePreviewPro
   const highlightStyle = {
     backgroundColor: config.highlight.color,
     whiteSpace: "nowrap",
-    border: `${ config.highlight.borderWidth }px solid ${ config.highlight.borderColor }`,
-    padding: `${ config.highlight.margin.top }px ${ config.highlight.margin.right }px ${ config.highlight.margin.bottom }px ${ config.highlight.margin.left }px`,
+    // padding: `${ config.highlight.margin.top }px ${ config.highlight.margin.right }px ${ config.highlight.margin.bottom }px ${ config.highlight.margin.left }px`,
+    padding: `${ config.textMargin.top }px ${ config.textMargin.right }px ${ config.textMargin.bottom }px ${ config.textMargin.left }px`,
   };
 
   const candidatesContainerStyle = {
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index 7f2a10d..06a0bf0 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -111,8 +111,6 @@ export function parseThemeFile(content: string): ThemeConfig {
     // Background
     background: {
       color: sections['InputPanel/Background']?.['Color'] || '#ffffff',
-      borderColor: '#000000',
-      borderWidth: 0,
       gravity: 'Center',
       margin: parseMargin(sections['InputPanel/Background/Margin'] || {}),
     },
@@ -120,8 +118,6 @@ export function parseThemeFile(content: string): ThemeConfig {
     // Highlight
     highlight: {
       color: sections['InputPanel/Highlight']?.['Color'] || '#ffffff',
-      borderColor: '#000000',
-      borderWidth: 0,
       gravity: 'Center',
       margin: parseMargin(sections['InputPanel/Highlight/Margin'] || {}),
     },
diff --git a/src/types/theme.ts b/src/types/theme.ts
index cc5c6c2..ac116c8 100644
--- a/src/types/theme.ts
+++ b/src/types/theme.ts
@@ -8,8 +8,6 @@ export interface Margin {
 export interface Background {
   image?: string;
   color: string;
-  borderColor: string;
-  borderWidth: number;
   overlay?: string;
   gravity: string;
   overlayOffsetX?: number;
@@ -94,8 +92,6 @@ export const defaultConfig: ThemeConfig = {
 
   background: {
     color: '#e5e9f0',
-    borderColor: '',
-    borderWidth: 0,
     gravity: '',
     margin: {
       left: 2,
@@ -107,8 +103,6 @@ export const defaultConfig: ThemeConfig = {
 
   highlight: {
     color: '#d8dee9',
-    borderColor: '',
-    borderWidth: 0,
     gravity: '',
     margin: {
       left: 10,