diff --git a/package-lock.json b/package-lock.json
index f9ad9fb..fc6b6fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,10 +14,10 @@
         "bytenode": "^1.5.7",
         "crypto": "^1.0.1",
         "electron-squirrel-startup": "^1.0.1",
+        "element-plus": "^2.12.0",
         "lodash-es": "^4.17.21",
         "log4js": "^6.9.1",
         "pinia": "^2.3.1",
-        "radix-vue": "^1.9.17",
         "vue": "^3.5.22",
         "vue-router": "^4.5.1"
       },
@@ -109,6 +109,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@electron-forge/cli": {
       "version": "7.10.2",
       "resolved": "https://registry.npmjs.org/@electron-forge/cli/-/cli-7.10.2.tgz",
@@ -936,6 +945,15 @@
         "node": ">=14.14"
       }
     },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
+      "integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -1466,17 +1484,6 @@
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
       "license": "MIT"
     },
-    "node_modules/@floating-ui/vue": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmmirror.com/@floating-ui/vue/-/vue-1.1.9.tgz",
-      "integrity": "sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.7.4",
-        "@floating-ui/utils": "^0.2.10",
-        "vue-demi": ">=0.13.0"
-      }
-    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -1743,24 +1750,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@internationalized/date": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmmirror.com/@internationalized/date/-/date-3.10.0.tgz",
-      "integrity": "sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
-    "node_modules/@internationalized/number": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmmirror.com/@internationalized/number/-/number-3.6.5.tgz",
-      "integrity": "sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1940,6 +1929,17 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@remixicon/vue": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@remixicon/vue/-/vue-4.7.0.tgz",
@@ -2277,21 +2277,6 @@
         "url": "https://github.com/sindresorhus/is?sponsor=1"
       }
     },
-    "node_modules/@swc/helpers": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmmirror.com/@swc/helpers/-/helpers-0.5.17.tgz",
-      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
-    "node_modules/@swc/helpers/node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
-    },
     "node_modules/@szmarczak/http-timer": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
@@ -2612,32 +2597,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@tanstack/virtual-core": {
-      "version": "3.13.12",
-      "resolved": "https://registry.npmmirror.com/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
-      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/vue-virtual": {
-      "version": "3.13.12",
-      "resolved": "https://registry.npmmirror.com/@tanstack/vue-virtual/-/vue-virtual-3.13.12.tgz",
-      "integrity": "sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==",
-      "license": "MIT",
-      "dependencies": {
-        "@tanstack/virtual-core": "3.13.12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "vue": "^2.7.0 || ^3.0.0"
-      }
-    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -2743,14 +2702,12 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-FOvQ0YPD5NOfPgMzJihoT+Za5pdkDJWcbpuj1DjaKZIr/gxodQjY/uWEFlTNqW2ugXHUiL8lRQgw63dzKHZdeQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.12",
       "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
       "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/lodash": "*"
@@ -2793,12 +2750,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/web-bluetooth": {
-      "version": "0.0.20",
-      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
-      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
-      "license": "MIT"
-    },
     "node_modules/@types/wrap-ansi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz",
@@ -3147,42 +3098,6 @@
       "integrity": "sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==",
       "license": "MIT"
     },
-    "node_modules/@vueuse/core": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.11.1.tgz",
-      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.11.1",
-        "@vueuse/shared": "10.11.1",
-        "vue-demi": ">=0.14.8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/metadata": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.11.1.tgz",
-      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.11.1.tgz",
-      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
-      "license": "MIT",
-      "dependencies": {
-        "vue-demi": ">=0.14.8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -3600,24 +3515,6 @@
       "dev": true,
       "license": "Python-2.0"
     },
-    "node_modules/aria-hidden": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmmirror.com/aria-hidden/-/aria-hidden-1.2.6.tgz",
-      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/aria-hidden/node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
-    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -3760,6 +3657,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/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.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -4676,6 +4579,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.19",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -4788,12 +4697,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/defu": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmmirror.com/defu/-/defu-6.1.4.tgz",
-      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
-      "license": "MIT"
-    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -5472,6 +5375,73 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/element-plus": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.12.0.tgz",
+      "integrity": "sha512-M9YLSn2np9OnqrSKWsiXvGe3qnF8pd94+TScsHj1aTMCD+nSEvucXermf807qNt6hOP040le0e5Aft7E9ZfHmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.2",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.17.20",
+        "@types/lodash-es": "^4.17.12",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.19",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.3",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/element-plus/node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
+      "license": "MIT"
+    },
+    "node_modules/element-plus/node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -6318,6 +6288,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -8410,7 +8381,6 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash-es": {
@@ -8419,6 +8389,17 @@
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "license": "MIT"
     },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
     "node_modules/lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
@@ -8684,6 +8665,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -9096,6 +9083,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -10001,46 +9994,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/radix-vue": {
-      "version": "1.9.17",
-      "resolved": "https://registry.npmmirror.com/radix-vue/-/radix-vue-1.9.17.tgz",
-      "integrity": "sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.6.7",
-        "@floating-ui/vue": "^1.1.0",
-        "@internationalized/date": "^3.5.4",
-        "@internationalized/number": "^3.5.3",
-        "@tanstack/vue-virtual": "^3.8.1",
-        "@vueuse/core": "^10.11.0",
-        "@vueuse/shared": "^10.11.0",
-        "aria-hidden": "^1.2.4",
-        "defu": "^6.1.4",
-        "fast-deep-equal": "^3.1.3",
-        "nanoid": "^5.0.7"
-      },
-      "peerDependencies": {
-        "vue": ">= 3.2.0"
-      }
-    },
-    "node_modules/radix-vue/node_modules/nanoid": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-5.1.6.tgz",
-      "integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.js"
-      },
-      "engines": {
-        "node": "^18 || >=20"
-      }
-    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
diff --git a/package.json b/package.json
index 85571e8..a9a3882 100644
--- a/package.json
+++ b/package.json
@@ -54,10 +54,10 @@
     "bytenode": "^1.5.7",
     "crypto": "^1.0.1",
     "electron-squirrel-startup": "^1.0.1",
+    "element-plus": "^2.12.0",
     "lodash-es": "^4.17.21",
     "log4js": "^6.9.1",
     "pinia": "^2.3.1",
-    "radix-vue": "^1.9.17",
     "vue": "^3.5.22",
     "vue-router": "^4.5.1"
   }
diff --git a/src/renderer/components/Pagination/index.vue b/src/renderer/components/Pagination/index.vue
index 9a23bb9..18741ef 100644
--- a/src/renderer/components/Pagination/index.vue
+++ b/src/renderer/components/Pagination/index.vue
@@ -1,135 +1,49 @@
 <template>
-  <div class="flex items-center justify-between pt-[20px]">
-    <div class="text-sm text-gray-600">共 {{ total }} 项数据</div>
-    <div class="flex items-center gap-2">
-      <SelectRoot v-model="selectedCount" v-model:open="open">
-        <SelectTrigger class="inline-flex items-center justify-between rounded-md border border-gray-200 bg-white px-3 py-1 text-sm text-gray-700 shadow-sm hover:bg-gray-50">
-          <span>{{ selectedCount }} 条/页</span>
-          <RiArrowDownSLine />
-        </SelectTrigger>
-
-        <SelectPortal :to="portalTarget">
-          <SelectContent position="popper" :side-offset="6" class="z-50 rounded-md border border-gray-200 bg-white shadow-lg" :style="{ minWidth: 'var(--radix-select-trigger-width)' }">
-            <SelectViewport class="p-1">
-              <SelectGroup>
-                <SelectItem v-for="(option, index) in pageSizes" :key="index" :value="String(option)" class="flex cursor-pointer select-none items-center rounded px-2 py-1 text-sm text-gray-700 hover:bg-gray-50">
-                  <SelectItemText>{{ option }} 条/页</SelectItemText>
-                </SelectItem>
-              </SelectGroup>
-            </SelectViewport>
-          </SelectContent>
-        </SelectPortal>
-      </SelectRoot>
-
-      <PaginationRoot
-        v-model:page="currentPage"
-        :total="total"
-        :items-per-page="Number(selectedCount)"
-        show-edges
-        :sibling-count="1"
-        :default-page="currentPage"
-      >
-        <PaginationList
-          v-slot="{ items }"
-          class="flex items-center gap-1 text-[#171717]"
-        >
-          <PaginationPrev aria-label="上一页" class="w-9 h-9 flex items-center justify-center mr-4 border rounded bg-white text-gray-700 disabled:opacity-50">
-            <RiArrowLeftLine size="18" />
-          </PaginationPrev>
-          <template v-for="(page, index) in items">
-            <PaginationListItem
-              v-if="page.type === 'page'"
-              :key="index"
-              class="w-9 h-9 border rounded transition data-[selected]:bg-blue-600 data-[selected]:text-white hover:bg-white/10"
-              :value="page.value"
-            >
-              {{ page.value }}
-            </PaginationListItem>
-            <PaginationEllipsis
-              v-else
-              :key="page.type"
-              :index="index"
-              class="w-9 h-9 flex items-center justify-center"
-            >
-              &#8230;
-            </PaginationEllipsis>
-          </template>
-          <PaginationNext aria-label="下一页" class="w-9 h-9 flex items-center justify-center ml-4 border rounded bg-white text-gray-700 disabled:opacity-50 focus-within:outline focus-within:outline-1 focus-within:outline-offset-1">
-            <RiArrowRightLine size="18" />
-          </PaginationNext>
-        </PaginationList>
-      </PaginationRoot>
-
-      <div class="ml-2 flex items-center gap-2 text-sm text-gray-700">
-        <span>跳至</span>
-        <input
-          class="w-[55px] rounded border border-gray-200 bg-white px-2 py-1 text-center outline-none focus:border-blue-500"
-          type="text"
-          :min="1"
-          :max="pageTotal"
-          v-model.number="jumpValue"
-          @keydown.enter="onJump"
-          @blur="onJump"
-        />
-        <span>/ {{ pageTotal }} 页</span>
-      </div>
-    </div>
-  </div>
-  
+  <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" class="mt-[15px]"
+    :pager-count="5" :page-sizes="pageSizes" :current-page="current" background :page-size="size" :layout="layout"
+    :total="total">
+  </el-pagination>
 </template>
 
-<script setup lang="ts" name="Pagination">
-import { ref, defineProps, defineEmits, watch, onMounted, computed } from 'vue'
-import { RiArrowLeftLine, RiArrowRightLine, RiArrowDownSLine } from '@remixicon/vue'
-import { SelectRoot, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectGroup, SelectItem, SelectItemText, PaginationRoot, PaginationList, PaginationPrev, PaginationListItem, PaginationEllipsis, PaginationNext } from 'radix-vue'
-import { PaginationProps, EmitsProps } from '@/types'
+<script setup lang="ts" name="pagination">
+const emit = defineEmits(['sizeChange', 'currentChange']);
 
-const props = defineProps<PaginationProps>()
-const emit = defineEmits<EmitsProps>()
-
-const pageSizes = ref(Array.isArray(props.pageSizes) && props.pageSizes.length ? props.pageSizes : [10, 20, 50, 100, 200])
-const selectedCount = ref(String(props.pageSize ?? pageSizes.value[0]))
-const open = ref(false)
-const portalTarget = typeof document !== 'undefined' ? document.body : undefined
-watch(() => props.pageSize, (val) => selectedCount.value = String(val))
-watch(selectedCount, (val) => emit('update:pageSize', val))
-watch(open, (val) => {
-  console.log('Select open state:', val)
-})
-
-onMounted(() => {
-  console.log('Select initial value:', selectedCount.value)
-})
-const pageTotal = computed(() => {
-  const t = Number(props.total || 0)
-  const s = Number(selectedCount.value || props.pageSize || 10)
-  const pages = s > 0 ? Math.ceil(t / s) : 1
-  return Math.max(1, pages)
-})
-watch(pageTotal, (val) => {
-  console.log('Pagination total pages:', val, 'from total items:', props.total, 'pageSize:', selectedCount.value)
-})
-
-// 跳转分页
-const jumpValue = ref()
-const onJump = () => {
-  const v = Number(jumpValue.value)
-  if (!Number.isFinite(v)) return
-  const clamped = Math.max(1, Math.min(pageTotal.value, v))
-  jumpValue.value = clamped
-  currentPage.value = clamped
-  emit('update:currentPage', clamped)
-  emit('currentChange', clamped)
-}
-
-const currentPage = ref(props.currentPage ?? 1)
-watch(() => props.currentPage, (val) => {
-  if (typeof val === 'number' && Number.isFinite(val)) currentPage.value = val
-})
-watch(currentPage, (p) => {
-  emit('update:currentPage', p)
-  emit('currentChange', p)
-})
+const props = defineProps({
+  current: {
+    type: Number,
+    default: 1,
+  },
+  size: {
+    type: Number,
+    default: 10,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  pageSizes: {
+    type: Array as () => number[],
+    default: () => {
+      return [10, 20, 50, 100, 200];
+    },
+  },
+  layout: {
+    type: String,
+    default: 'total, sizes, prev, pager, next, jumper',
+  },
+});
+// 分页改变
+const sizeChangeHandle = (val: number) => {
+  emit('sizeChange', val);
+};
+// 分页改变
+const currentChangeHandle = (val: number) => {
+  emit('currentChange', val);
+};
 </script>
 
-<style></style>
+<style scoped>
+:deep(.el-pagination__sizes) {
+  margin-left: auto;
+}
+</style>
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 99a7653..6b3b183 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -4,6 +4,9 @@ import { createPinia } from "pinia";
 import router from "./router";
 import App from "./App.vue";
 import Layout from "./layout/index.vue";
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import locale from 'element-plus/es/locale/lang/zh-cn'
 
 // 创建 Vue 应用实例
 const app = createApp(App);
@@ -16,6 +19,9 @@ app.component('Layout', Layout);
 
 // 使用 Vue Router
 app.use(router);
+app.use(ElementPlus, {
+  locale,
+})
 
 // 挂载应用到 DOM
 app.mount("#app");
diff --git a/src/renderer/views/rate/components/RateContentSection/index.vue b/src/renderer/views/rate/components/RateContentSection/index.vue
index ee80025..40da24a 100644
--- a/src/renderer/views/rate/components/RateContentSection/index.vue
+++ b/src/renderer/views/rate/components/RateContentSection/index.vue
@@ -1,28 +1,45 @@
 <template>
-    <div class="box-border border-[1px] border-[#E5E8EE] rounded-[16px] p-[20px]">
-        <Pagination v-model:current-page="queryParams.pageIndex" :page-size="queryParams.pageSize" :total="total" @update:pageSize="updatePageSize" @update:currentPage="updatePageIndex" />
+    <div class="box-border border-[1px] border-[#E5E8EE] rounded-[16px] p-[16px]">
+        <el-tabs v-model="activeName" class="demo-tabs">
+            <el-tab-pane :label="`${item.label}(${item.total})`" :name="item.name" v-for="item in tabs"
+                :key="item.label" />
+        </el-tabs>
+
+        <RateFilterSection />
+
+        <!-- 分页 -->
+        <Pagination v-model:current-page="queryParams.pageIndex" :page-size="queryParams.pageSize" :total="total" />
     </div>
 </template>
 
 <script setup lang="ts" name="RateContentSection">
 import { ref } from 'vue'
 import Pagination from '@/components/Pagination/index.vue'
+import RateFilterSection from '../RateFilterSection/index.vue'
 
+const activeName = ref('all')
+const tabs = ref([
+    {
+        label: '全部评价',
+        name: 'all',
+        total: 200,
+    },
+    {
+        label: '待回复',
+        name: 'second',
+        total: 100,
+    },
+    {
+        label: '差评',
+        name: 'third',
+        total: 50,
+    }
+])
 const total = ref(200)
 const queryParams = ref({
-  pageIndex: 1,
-  pageSize: 10,
+    pageIndex: 1,
+    pageSize: 10,
 })
-
-const updatePageSize = (val: string) => {
-  console.log("🚀 ~ updatePageSize ~ val:", val)
-  queryParams.value.pageSize = Number(val)
-}
-
-const updatePageIndex = (val: number) => {
-  console.log("🚀 ~ updatePageIndex ~ val:", val)
-  queryParams.value.pageIndex = val
-}
 </script>
 
 <style></style>
\ No newline at end of file
diff --git a/src/renderer/views/rate/components/RateFilterSection/index.vue b/src/renderer/views/rate/components/RateFilterSection/index.vue
new file mode 100644
index 0000000..f3e8a01
--- /dev/null
+++ b/src/renderer/views/rate/components/RateFilterSection/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="flex items-center gap-[12px]">
+    <el-form ref="queryRef" :inline="true" :model="queryParams" @keyup.enter="handleQuery">
+      <el-form-item prop="dateRange">
+        <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
+          start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px;" />
+      </el-form-item>
+      <el-form-item prop="channel">
+        <el-select v-model="queryParams.channel" placeholder="请选择渠道" style="width: 240px;">
+          <el-option v-for="item in channels" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery">搜索</el-button>
+        <el-button @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="RateFilterSection">
+import { ref, getCurrentInstance } from 'vue'
+
+const { proxy }: any = getCurrentInstance()
+const queryParams = ref({
+  pageIndex: 1,
+  pageSize: 10,
+  channel: '',
+  startDate: '',
+  endDate: '',
+})
+const dateRange = ref([])
+const channels = [
+  {
+    label: '全部',
+    value: 'all',
+  },
+  {
+    label: '携程',
+    value: 'ctrip',
+  },
+  {
+    label: '飞猪',
+    value: 'flyingpig',
+  },
+  {
+    label: '抖音',
+    value: 'douyin',
+  },
+]
+
+const loading = ref(false)
+const total = ref(0)
+const queryRef = ref()
+
+/** 查询评论列表 */
+function getList() {
+  loading.value = true
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageIndex = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  queryRef.value.resetFields()
+  handleQuery()
+}
+</script>
diff --git a/src/renderer/views/rate/components/RatePanelSection/index.vue b/src/renderer/views/rate/components/RatePanelSection/index.vue
index 04f0fb7..1837e65 100644
--- a/src/renderer/views/rate/components/RatePanelSection/index.vue
+++ b/src/renderer/views/rate/components/RatePanelSection/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-5 gap-[15px] mb-[20px]">
+  <div class="grid grid-cols-5 gap-[15px] mb-[20px] select-none">
     <div class="bg-[#F5F7FA] box-border flex flex-col p-[16px] rounded-[12px]" v-for="item in channels" :key="item.id">
       <div class="flex items-center mb-[8px]">
         <img :src="item.icon" class="w-[24px] h-[24px] mr-[8px]">
@@ -11,13 +11,14 @@
         {{ item.total }}条
       </div>
       <div class="flex items-center">
-        <RiStarFill :color="i <= item.score ? '#FA7319' : '#CACFD8'" class="w-[20px] h-[20px] mr-[2px]" v-for="i in 5" :key="i" />
+        <RiStarFill :color="i <= item.score ? '#FA7319' : '#CACFD8'" class="w-[20px] h-[20px] mr-[2px]" v-for="i in 5"
+          :key="i" />
         <span class="text-[14px] text-[#525866] leading-[20px] pl-[2px]">
           {{ item.score }}
         </span>
       </div>
     </div>
-  </div>  
+  </div>
 </template>
 
 <script setup lang="ts" name="RatePanelSection">
diff --git a/tsconfig.json b/tsconfig.json
index 70ad499..72a76a4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,7 +26,8 @@
     },
     "outDir": "dist",
     "moduleResolution": "bundler",
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "types": ["element-plus/global"]
   },
   "include": [
     "src/**/*",