diff --git a/package-lock.json b/package-lock.json
index a6ac7c7..03eba26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@electron-toolkit/preload": "^3.0.1",
         "@electron-toolkit/utils": "^4.0.0",
+        "ant-design-vue": "^4.2.6",
         "pinia": "^3.0.2",
         "ws": "^8.18.2"
       },
@@ -48,6 +49,34 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@ant-design/colors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz",
+      "integrity": "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.0"
+      }
+    },
+    "node_modules/@ant-design/icons-svg": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
+      "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==",
+      "license": "MIT"
+    },
+    "node_modules/@ant-design/icons-vue": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-7.0.1.tgz",
+      "integrity": "sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-svg": "^4.2.1"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.3"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -253,6 +282,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.27.2.tgz",
@@ -310,6 +348,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@develar/schema-utils": {
       "version": "2.6.5",
       "resolved": "https://registry.npmmirror.com/@develar/schema-utils/-/schema-utils-2.6.5.tgz",
@@ -735,6 +782,18 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.4",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.4.tgz",
@@ -2071,6 +2130,16 @@
         "win32"
       ]
     },
+    "node_modules/@simonwep/pickr": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.8.2.tgz",
+      "integrity": "sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^3.15.1",
+        "nanopop": "^2.1.0"
+      }
+    },
     "node_modules/@sindresorhus/is": {
       "version": "4.6.0",
       "resolved": "https://registry.npmmirror.com/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -2826,6 +2895,46 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/ant-design-vue": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-4.2.6.tgz",
+      "integrity": "sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-vue": "^7.0.0",
+        "@babel/runtime": "^7.10.5",
+        "@ctrl/tinycolor": "^3.5.0",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/unitless": "^0.8.0",
+        "@simonwep/pickr": "~1.8.0",
+        "array-tree-filter": "^2.1.0",
+        "async-validator": "^4.0.0",
+        "csstype": "^3.1.1",
+        "dayjs": "^1.10.5",
+        "dom-align": "^1.12.1",
+        "dom-scroll-into-view": "^2.0.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.15",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.25",
+        "shallow-equal": "^1.0.0",
+        "stylis": "^4.1.3",
+        "throttle-debounce": "^5.0.0",
+        "vue-types": "^3.0.0",
+        "warning": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ant-design-vue"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/app-builder-bin": {
       "version": "5.0.0-alpha.10",
       "resolved": "https://registry.npmmirror.com/app-builder-bin/-/app-builder-bin-5.0.0-alpha.10.tgz",
@@ -3040,6 +3149,12 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==",
+      "license": "MIT"
+    },
     "node_modules/assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/assert-plus/-/assert-plus-1.0.0.tgz",
@@ -3079,6 +3194,12 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
+      "license": "MIT"
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@@ -3776,6 +3897,12 @@
         "node": ">= 10"
       }
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
+      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==",
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -3913,6 +4040,17 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.43.0",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.43.0.tgz",
+      "integrity": "sha512-N6wEbTTZSYOY2rYAn85CuvWWkCK6QweMn7/4Nr3w+gDBeBhk/x4EJeY6FPo4QzDoJZxVTv8U7CMvgWk6pOHHqA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -4008,6 +4146,12 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz",
@@ -4286,6 +4430,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-align": {
+      "version": "1.12.4",
+      "resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.4.tgz",
+      "integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==",
+      "license": "MIT"
+    },
+    "node_modules/dom-scroll-into-view": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
+      "integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==",
+      "license": "MIT"
+    },
     "node_modules/dotenv": {
       "version": "16.5.0",
       "resolved": "https://registry.npmmirror.com/dotenv/-/dotenv-16.5.0.tgz",
@@ -6200,6 +6356,15 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz",
+      "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-promise": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/is-promise/-/is-promise-4.0.0.tgz",
@@ -6323,7 +6488,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -6508,7 +6672,12 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "license": "MIT"
     },
     "node_modules/lodash.defaults": {
@@ -6575,6 +6744,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lowercase-keys": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
@@ -7005,6 +7186,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/nanopop": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/nanopop/-/nanopop-2.4.2.tgz",
+      "integrity": "sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw==",
+      "license": "MIT"
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -7876,6 +8063,12 @@
         "url": "https://github.com/sponsors/jet2jet"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
     "node_modules/resolve-alpn": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
@@ -8106,6 +8299,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "2.2.31",
+      "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
+      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
+      "license": "MIT",
+      "dependencies": {
+        "compute-scroll-into-view": "^1.0.20"
+      }
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
@@ -8191,6 +8393,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -8553,6 +8761,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
+      "license": "MIT"
+    },
     "node_modules/sumchecker": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/sumchecker/-/sumchecker-3.0.1.tgz",
@@ -8709,6 +8923,15 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+      "integrity": "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.13",
       "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.13.tgz",
@@ -9223,6 +9446,30 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vue-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz",
+      "integrity": "sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-object": "3.0.1"
+      },
+      "engines": {
+        "node": ">=10.15.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/package.json b/package.json
index e533d54..62a1b4b 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^4.0.0",
+    "ant-design-vue": "^4.2.6",
     "pinia": "^3.0.2",
     "ws": "^8.18.2"
   },
diff --git a/src/main/index.ts b/src/main/index.ts
index 37b0c37..0e2eec8 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -3,16 +3,6 @@ import path from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 
-import { PythonConnector } from './pyComm';
-
-const pythonConnector = new PythonConnector();
-setTimeout(() => {
-  pythonConnector.send({
-    command: 'process_data',
-    payload: { some: 'data' }
-  });
-}, 2000);
-
 let mainWindow: BrowserWindow | undefined
 
 function createMainWindow(): void {
@@ -42,7 +32,7 @@ function createMainWindow(): void {
   if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
     mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
   } else {
-    mainWindow.loadFile(path.join(__dirname, '../renderer/main/index.html'))
+    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
   }
 }
 
diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index a427fa0..493bdec 100644
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -1,9 +1,56 @@
 <template>
-  <ViedoPlayer />
-  <Caption />
+<div>
+  <a-row>
+    <a-col :span="controlSpan">
+      <div class="caption-control">
+        <a-card size="small" title="页面设置">
+        <div>
+          <span class="span-label">页面宽度</span>
+          <a-input
+            type="range" class="span-input"
+            min="6" max="18"
+            v-model:value="controlSpan"
+          />
+        </div>
+        </a-card>
+        <CaptionControl />
+        <CaptionStyle />
+      </div>
+    </a-col>
+    <a-col :span="24 - controlSpan">
+      <CaptionData />
+    </a-col>
+  </a-row>
+</div>
+
 </template>
 
 <script setup lang="ts">
-import ViedoPlayer from './components/VideoPlayer.vue'
-import Caption from './components/Caption.vue'
+import CaptionStyle from './components/CaptionStyle.vue'
+import CaptionControl from './components/CaptionControl.vue';
+import CaptionData from './components/CaptionData.vue'
+import { ref } from 'vue'
+
+const controlSpan = ref(9)
 </script>
+
+<style scoped>
+.caption-control {
+  height: 100vh;
+  border-right: 1px solid #7774;
+  padding: 20px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.span-label {
+  display: inline-block;
+  width: 80px;
+  text-align: right;
+  margin-right: 10px;
+}
+
+.span-input {
+  width: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/assets/styles/reset.css b/src/renderer/src/assets/styles/reset.css
index 93152d2..a7a751f 100644
--- a/src/renderer/src/assets/styles/reset.css
+++ b/src/renderer/src/assets/styles/reset.css
@@ -1,5 +1,6 @@
 body {
     margin: 0;
     padding: 0;
-    background-color: black;
+    height: 100vh;
+    overflow: hidden;
 }
\ No newline at end of file
diff --git a/src/renderer/src/components/Caption.vue b/src/renderer/src/components/Caption.vue
deleted file mode 100644
index b4c4ec0..0000000
--- a/src/renderer/src/components/Caption.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <div
-    class="video-caption"
-    v-if="captionContent"
-    ref="captionTarget"
-    :style="{
-      color: captionFontColor,
-      fontSize: captionFontSize + 'px',
-      fontFamily: captionFontFamily
-    }"
-  >
-    <div>{{ captionContent }}</div>
-    <div>{{ translation }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useCaptionStore } from '../stores/caption'
-const captionContent = ref<String>("これは確か、ずっと前に人からもらって。")
-const translation = ref<string>('这是很久以前从别人那里得到的。')
-const {captionFontColor, captionFontFamily, captionFontSize} = storeToRefs(useCaptionStore())
-const captionTarget = ref()
-
-window.electron.ipcRenderer.on('new-caption', (_, data) => {
-  captionContent.value = data
-})
-</script>
-
-<style scoped>
-.video-caption {
-  color: white;
-  background-color: rgba(99, 99, 99, 0.4);
-  display: inline-block;
-  max-width: 80%;
-  padding: 10px;
-  font-size: 32px;
-  font-weight: bold;
-  border-radius: 10px;
-  position: fixed;
-  bottom: 50px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-</style>
\ No newline at end of file
diff --git a/src/renderer/src/components/CaptionControl.vue b/src/renderer/src/components/CaptionControl.vue
new file mode 100644
index 0000000..53d9c66
--- /dev/null
+++ b/src/renderer/src/components/CaptionControl.vue
@@ -0,0 +1,83 @@
+<template>
+  <div style="height: 20px;"></div>
+  <a-card size="small" title="字幕控制">
+    <template #extra><a href="#">应用</a></template>
+    <div class="control-item">
+      <span class="control-label">源语言</span>
+      <a-select
+        class="control-input"
+        ref="select"
+        v-model:value="sourceLang"
+        :options="languages"
+      ></a-select>
+    </div>
+    <div class="control-item">
+      <span class="control-label">翻译语言</span>
+      <a-select
+        class="control-input"
+        ref="select"
+        v-model:value="targetLang"
+        :options="languages"
+      ></a-select>
+    </div>
+    <div class="control-item">
+      <span class="control-label">字幕引擎</span>
+      <a-select
+        class="control-input"
+        ref="select"
+        v-model:value="engine"
+        :options="captionEngine"
+      ></a-select>
+    </div>
+    <div class="control-item">
+      <span class="control-label">启用翻译</span>
+      <a-switch v-model:checked="translation" />
+    </div>
+  </a-card>
+  <div style="height: 20px;"></div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const languages = ref([
+  { value: 'en', label: '英语' },
+  { value: 'zh', label: '简体中文' },
+  { value: 'ja', label: '日语' },
+])
+const captionEngine = ref([
+  {value: 'gummy', label: '云端-阿里云-Gummy'}
+])
+
+
+const sourceLang = ref('en')
+const targetLang = ref('zh')
+const engine = ref('gummy')
+const translation = ref<boolean>(true)
+</script>
+
+<style scoped>
+.control-item {
+  margin: 10px 0;
+}
+
+.control-label {
+  display: inline-block;
+  width: 80px;
+  text-align: right;
+
+  margin-right: 10px;
+}
+
+.control-input {
+  width: calc(100% - 100px);
+  min-width: 100px;
+}
+
+.control-item-value {
+  width: 80px;
+  text-align: right;
+  font-size: 12px;
+  color: #666
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/components/CaptionData.vue b/src/renderer/src/components/CaptionData.vue
new file mode 100644
index 0000000..9261f25
--- /dev/null
+++ b/src/renderer/src/components/CaptionData.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <a-row>
+      <a-col :span="12">col-12</a-col>
+      <a-col :span="12">col-12</a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/renderer/src/components/CaptionStyle.vue b/src/renderer/src/components/CaptionStyle.vue
new file mode 100644
index 0000000..3bde95c
--- /dev/null
+++ b/src/renderer/src/components/CaptionStyle.vue
@@ -0,0 +1,208 @@
+<template>
+  <a-card size="small" title="字幕样式设置">
+    <template #extra>
+      <a>应用样式</a> | <a>取消更改</a>
+    </template>
+    <div class="style-item">
+      <span class="style-label">字体族</span>
+      <a-input
+        class="style-input"
+        v-model:value="currentFontFamily"
+      />   
+    </div>
+    <div class="style-item">
+      <span class="style-label">字体大小</span>
+      <a-input
+        class="style-input"
+        type="number"
+        v-model:value="currentFontSize"
+      />   
+    </div>
+    <div class="style-item">
+      <span class="style-label">字体颜色</span>
+      <a-input
+        class="style-input"
+        type="color"
+        v-model:value="currentFontColor"
+      />
+      <div class="style-item-value">{{ currentFontColor }}</div>
+    </div>
+    <div class="style-item">
+      <span class="style-label">背景颜色</span>
+      <a-input
+        class="style-input"
+        type="color"
+        v-model:value="currentBackground"
+      />
+      <div class="style-item-value">{{ currentBackground }}</div>
+    </div>
+    <div class="style-item">
+      <span class="style-label">背景透明度</span>
+      <a-input
+        class="style-input range-input"
+        type="range"
+        min="0"
+        max="100"
+        v-model:value="currentOpacity"
+      />
+      <div class="style-item-value">{{ currentOpacity }}</div>
+    </div>
+    
+    <div class="style-item">
+      <span class="style-label">显示预览</span>
+      <a-switch v-model:checked="displayPreview" />
+      <span class="style-label">显示翻译</span>
+      <a-switch v-model:checked="currentTranslation" />
+    </div>
+
+    <div v-show="currentTranslation">
+      <a-card size="small" title="翻译样式设置">
+        <template #extra>
+          <a @click="useSameStyle">使用相同样式</a>
+        </template>
+        <div class="style-item">
+          <span class="style-label">翻译字体</span>
+          <a-input
+            class="style-input"
+            v-model:value="currentTransFontFamily"
+          />   
+        </div>
+        <div class="style-item">
+          <span class="style-label">翻译大小</span>
+          <a-input
+            class="style-input"
+            type="number"
+            v-model:value="currentTransFontSize"
+          />   
+        </div>
+        <div class="style-item">
+          <span class="style-label">翻译颜色</span>
+          <a-input
+            class="style-input"
+            type="color"
+            v-model:value="currentTransFontColor"
+          />
+          <div class="style-item-value">{{ currentTransFontColor }}</div>
+        </div>
+      </a-card>
+    </div>
+
+  </a-card>
+
+  <Teleport to="body">
+    <div
+      v-if="displayPreview"
+      class="preview-container"
+      :style="{
+        backgroundColor: addOpicityToColor(currentBackground, currentOpacity)
+      }"
+    >
+      <div class="preview-caption"
+        :style="{
+          fontFamily: currentFontFamily,
+          fontSize: currentFontSize + 'px',
+          color: currentFontColor
+        }">
+        {{ "This is a preview of subtitle styles." }}
+      </div>
+      <div class="preview-translation" v-if="currentTranslation"
+        :style="{
+          fontFamily: currentTransFontFamily,
+          fontSize: currentTransFontSize + 'px',
+          color: currentTransFontColor  
+        }"
+      >这是字幕样式预览(翻译)</div>
+    </div>    
+  </Teleport>
+
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+// import { useCaptionStore } from '../stores/caption'
+// const caption = useCaptionStore()
+const currentFontFamily = ref<string>('sans-serif')
+const currentFontSize = ref<number>(24)
+const currentFontColor = ref<string>('#000000')
+const currentBackground = ref<string>('#dbe2ef')
+const currentOpacity = ref<number>(50)
+const currentTranslation = ref<boolean>(true)
+const currentTransFontFamily = ref<string>('sans-serif')
+const currentTransFontSize = ref<number>(24)
+const currentTransFontColor = ref<string>('#000000')
+const displayPreview = ref<boolean>(true)
+
+function addOpicityToColor(color: string, opicity: number) {
+  if (color.length !== 7 || color[0] !== '#') {
+    throw new Error('Invalid color format. Please use a valid hex color like #AABBCC.');
+  }
+  const opicityValue = Math.round(opicity * 255 / 100);
+  const opicityHex = opicityValue.toString(16).padStart(2, '0');
+  return `${color}${opicityHex}`;
+}
+
+function useSameStyle(){
+  currentTransFontFamily.value = currentFontFamily.value;
+  currentTransFontSize.value = currentFontSize.value;
+  currentTransFontColor.value = currentFontColor.value;
+}
+</script>
+
+<style scoped>
+.caption-style {
+  height: 100vh;
+  border-right: 1px solid #7774;
+  padding: 20px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.caption-button {
+  display: flex;
+  justify-content: center;
+}
+
+.style-item {
+  margin: 10px 0;
+}
+
+.style-label {
+  display: inline-block;
+  width: 80px;
+  text-align: right;
+  margin-right: 10px;
+}
+
+.style-input {
+  width: calc(100% - 100px);
+  min-width: 100px;
+}
+
+.style-item-value {
+  width: 80px;
+  text-align: right;
+  font-size: 12px;
+  color: #666
+}
+
+.range-input {
+  width: calc(100% - 110px);
+  min-width: 90px;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.preview-container {
+  line-height: 2em;
+  width: 60%;
+  text-align: center;
+  position: absolute;
+  padding: 20px;
+  border-radius: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/components/Settings.vue b/src/renderer/src/components/Settings.vue
deleted file mode 100644
index 03ff0a6..0000000
--- a/src/renderer/src/components/Settings.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-    <div class="settings">
-      <input type="color" v-model="captionFontColor">
-      <input type="text" v-model="captionFontFamily">
-      <input type="number" v-model="captionFontSize">
-    </div>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { useCaptionStore } from '../stores/caption'
-const {captionFontColor, captionFontFamily, captionFontSize} = storeToRefs(useCaptionStore())
-</script>
-
-<style scoped>
-.settings {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 50px;
-  background-color: black;
-  box-sizing: border-box;
-}
-input {
-  height: 30px;
-  margin: auto 20px;
-}
-</style>
\ No newline at end of file
diff --git a/src/renderer/src/components/VideoPlayer.vue b/src/renderer/src/components/VideoPlayer.vue
deleted file mode 100644
index 8c072c3..0000000
--- a/src/renderer/src/components/VideoPlayer.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div class="video-player">
-    <video src="../assets/video/example-ja.mp4" controls></video>
-    <Settings />
-  </div>
-</template>
-
-<script setup lang="ts">
-import Settings from './Settings.vue'
-</script>
-
-<style scoped>
-.video-player {
-  display: flex;
-  height: 100vh;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-video {
-  width: 100%;
-  height: calc(100vh - 50px);
-}
-</style>
\ No newline at end of file
diff --git a/src/renderer/src/main.ts b/src/renderer/src/main.ts
index d8c9746..5dbc063 100644
--- a/src/renderer/src/main.ts
+++ b/src/renderer/src/main.ts
@@ -2,7 +2,10 @@ import './assets/styles/reset.css'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import App from './App.vue'
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/reset.css';
 
 const app = createApp(App)
 app.use(createPinia())
+app.use(Antd)
 app.mount('#app')
\ No newline at end of file
diff --git a/src/renderer/src/stores/caption.ts b/src/renderer/src/stores/caption.ts
index 3027019..d4bcd18 100644
--- a/src/renderer/src/stores/caption.ts
+++ b/src/renderer/src/stores/caption.ts
@@ -5,5 +5,11 @@ export const useCaptionStore = defineStore('caption', () => {
   const captionFontFamily = ref<string>('sans-serif')
   const captionFontSize = ref<number>(24)
   const captionFontColor = ref<string>('#ffffff')
-  return { captionFontFamily, captionFontSize, captionFontColor }
+  const backgroundColor = ref<string>('#000000')
+  return {
+    captionFontFamily,
+    captionFontSize,
+    captionFontColor,
+    backgroundColor
+  }
 })
\ No newline at end of file