diff --git a/.gitignore b/.gitignore
index 6839e25..d8fed21 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,6 +39,8 @@
 *.sdf
 *.VC.db
 *.VC.opendb
+*.user
+*/*/.vscode/
 
 # Precompiled Assets
 SourceArt/**/*.png
diff --git a/web/package-lock.json b/web/package-lock.json
index 0072118..fde81a4 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11,6 +11,7 @@
         "core-js": "^3.6.5",
         "echarts": "^5.3.2",
         "lib-flexible": "^0.3.2",
+        "simple-peer": "^9.11.1",
         "vue": "^2.6.11"
       },
       "devDependencies": {
@@ -3410,7 +3411,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5506,7 +5506,6 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
       "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "dev": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -6209,6 +6208,11 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/err-code": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz",
+      "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA=="
+    },
     "node_modules/errno": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
@@ -7619,6 +7623,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-browser-rtc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz",
+      "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ=="
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -8446,7 +8455,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -8623,8 +8631,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/inquirer": {
       "version": "7.3.3",
@@ -10216,8 +10223,7 @@
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/multicast-dns": {
       "version": "6.2.3",
@@ -12538,11 +12544,29 @@
       "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
       "dev": true
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -13093,8 +13117,7 @@
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
@@ -13584,6 +13607,70 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-peer": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz",
+      "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "debug": "^4.3.2",
+        "err-code": "^3.0.1",
+        "get-browser-rtc": "^1.1.0",
+        "queue-microtask": "^1.2.3",
+        "randombytes": "^2.1.0",
+        "readable-stream": "^3.6.0"
+      }
+    },
+    "node_modules/simple-peer/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/simple-peer/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -14162,7 +14249,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
       "dependencies": {
         "safe-buffer": "~5.1.0"
       }
@@ -15503,8 +15589,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/util.promisify": {
       "version": "1.0.0",
@@ -19623,8 +19708,7 @@
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
     "batch": {
       "version": "0.6.1",
@@ -21264,7 +21348,6 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
       "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "dev": true,
       "requires": {
         "ms": "^2.1.3"
       }
@@ -21814,6 +21897,11 @@
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "dev": true
     },
+    "err-code": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz",
+      "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA=="
+    },
     "errno": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
@@ -22908,6 +22996,11 @@
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
       "dev": true
     },
+    "get-browser-rtc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz",
+      "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ=="
+    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -23534,8 +23627,7 @@
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
     "iferr": {
       "version": "0.1.5",
@@ -23663,8 +23755,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "inquirer": {
       "version": "7.3.3",
@@ -24883,8 +24974,7 @@
     "ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -26773,11 +26863,15 @@
       "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
       "dev": true
     },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
       "requires": {
         "safe-buffer": "^5.1.0"
       }
@@ -27221,8 +27315,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-push-apply": {
       "version": "1.0.0",
@@ -27616,6 +27709,41 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "simple-peer": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz",
+      "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==",
+      "requires": {
+        "buffer": "^6.0.3",
+        "debug": "^4.3.2",
+        "err-code": "^3.0.1",
+        "get-browser-rtc": "^1.1.0",
+        "queue-microtask": "^1.2.3",
+        "randombytes": "^2.1.0",
+        "readable-stream": "^3.6.0"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+          "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.2.1"
+          }
+        },
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -28113,7 +28241,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.0"
       }
@@ -29162,8 +29289,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "util.promisify": {
       "version": "1.0.0",
diff --git a/web/package.json b/web/package.json
index 5fb3572..12398fb 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,6 +11,7 @@
     "core-js": "^3.6.5",
     "echarts": "^5.3.2",
     "lib-flexible": "^0.3.2",
+    "simple-peer": "^9.11.1",
     "vue": "^2.6.11"
   },
   "devDependencies": {
diff --git a/web/src/App.vue b/web/src/App.vue
index 37de076..6518b25 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -2,9 +2,10 @@
   <div id="app">
    <WebRTC />
    <div id="ui">
-   <TopBar />
+   <TopBar @open-task-modal="openTaskModal" />
    <LeftPane />
    <RightPane />
+   <TaskModal ref="taskModal" />
    </div>
   </div>
 </template>
@@ -14,13 +15,21 @@ import WebRTC from './components/WebRTC.vue'
 import TopBar from './components/TopBar.vue'
 import LeftPane from "./components/LeftPane.vue"
 import RightPane from "./components/RightPane.vue"
+import TaskModal from './components/TaskModal.vue'
+
 export default {
   name: 'App',
   components: {
     WebRTC,
     TopBar,
     LeftPane,
-    RightPane
+    RightPane,
+    TaskModal,
+  },
+  methods: {
+    openTaskModal() {
+      this.$refs.taskModal.openModal();
+    },
   },
   mounted()
   {
diff --git a/web/src/components/TaskModal.vue b/web/src/components/TaskModal.vue
new file mode 100644
index 0000000..f9a88a0
--- /dev/null
+++ b/web/src/components/TaskModal.vue
@@ -0,0 +1,332 @@
+<template>
+  <div class="modal" v-if="isVisible">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>任务选择</h2>
+        <span class="close-btn" @click="closeModal">&times;</span>
+      </div>
+      <div class="search-area">
+        <div class="search-item">
+          <label for="year">年度:</label>
+          <input type="number" v-model="year" class="year-input"/>
+        </div>
+        <div class="search-item">
+          <label for="taskName">任务名称:</label>
+          <select v-model="taskName" class="task-select">
+            <option value="xxx任务">xxx任务</option>
+          </select>
+        </div>
+        <button class="search-btn" @click="handleSearch">查询</button>
+        <button class="reset-btn" @click="handleReset">重置</button>
+      </div>
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>日期</th>
+              <th>游戏数</th>
+              <th>练习日</th>
+              <th>参数飞行数</th>
+              <th>参数模型</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(task, index) in tasks" :key="index">
+              <td>{{ task.date }}</td>
+              <td>{{ task.gameCount }}</td>
+              <td>{{ task.practiceDay }}</td>
+              <td>{{ task.paramFlightCount }}</td>
+              <td>{{ task.paramModel }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer">
+        <label class="effect-checkbox">
+          <input type="checkbox" v-model="showEffect" />
+          <span>是否添加GIS数据</span>
+        </label>
+        <div class="button-group">
+          <button class="cancel-btn" @click="closeModal">退出</button>
+          <button class="confirm-btn" @click="confirm">确定</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import webrtc from '../webrtc';
+
+export default {
+  name: 'TaskModal',
+  data() {
+    return {
+      isVisible: false,
+      year: new Date().getFullYear(),
+      taskName: '',
+      showEffect: false,
+      tasks: [
+        { date: '2025-11-10', gameCount: 1, practiceDay: 3, paramFlightCount: 65, paramModel: 'J-11,模型-7' },
+      ],
+      originalTasks: [
+        { date: '2025-11-10', gameCount: 1, practiceDay: 3, paramFlightCount: 65, paramModel: 'J-11,模型-7' },
+      ],
+    };
+  },
+  methods: {
+    openModal() {
+      this.isVisible = true;
+      this.initData();
+    },
+    closeModal() {
+      this.isVisible = false;
+    },
+    confirm() {
+      const data = {
+        year: this.year,
+        taskName: this.taskName,
+        showEffect: this.showEffect,
+        selectedTasks: this.tasks
+      };
+      console.log('Confirmed:', data);
+      
+      try {
+        webrtc.webrtc.emitCommand("TaskSelected", data);
+      } catch (error) {
+        console.error('Error in emitCommand:', error);
+      }
+      
+      this.closeModal();
+    },
+    initData() {
+      this.originalTasks = [
+        { date: '2025-11-10', gameCount: 1, practiceDay: 3, paramFlightCount: 65, paramModel: 'J-11,模型-7' },
+        { date: '2025-11-11', gameCount: 2, practiceDay: 4, paramFlightCount: 75, paramModel: 'J-11,模型-8' },
+        { date: '2025-11-12', gameCount: 1, practiceDay: 3, paramFlightCount: 65, paramModel: 'J-11,模型-9' },
+      ];
+      this.tasks = [...this.originalTasks];
+    },
+    handleSearch() {
+      this.tasks = this.originalTasks.filter(task => {
+        const yearMatch = task.date.includes(this.year.toString());
+        const taskNameMatch = !this.taskName || task.paramModel.includes(this.taskName);
+        return yearMatch && taskNameMatch;
+      });
+      
+      try {
+        const data = {
+          command: "SearchTask",
+          year: this.year,
+          taskName: this.taskName
+        }
+        webrtc.webrtc.emitUIInter(data);
+      } catch (error) {
+        console.error('Error in emitCommand:', error);
+      }
+    },
+    handleReset() {
+      this.year = new Date().getFullYear();
+      this.taskName = '';
+      this.tasks = [...this.originalTasks];
+      
+      try {
+        webrtc.webrtc.emitCommand("ResetTask", {});
+      } catch (error) {
+        console.error('Error in emitCommand:', error);
+      }
+    },
+  },
+  created() {
+    this.initData();
+  }
+};
+</script>
+
+<style scoped>
+.modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  pointer-events: auto;
+}
+
+.modal-content {
+  background-color: #1e2c42;
+  color: white;
+  padding: 12px;
+  border-radius: 5px;
+  width: 50%;
+  max-width: 500px;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.close-btn {
+  color: #999;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 0 5px;
+}
+
+.close-btn:hover {
+  color: #fff;
+}
+
+h2 {
+  margin: 0;
+  color: white;
+  font-size: 14px;
+}
+
+.search-area {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  gap: 6px;
+}
+
+.search-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.search-item label {
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.year-input {
+  width: 60px;
+}
+
+.task-select {
+  width: 100px;
+}
+
+input, select {
+  background-color: #1e2c42;
+  border: 1px solid #3a4b66;
+  color: white;
+  padding: 2px 6px;
+  border-radius: 2px;
+  height: 20px;
+  font-size: 12px;
+}
+
+.table-container {
+  max-height: 180px;
+  overflow-y: auto;
+  margin-bottom: 10px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: #1e2c42;
+}
+
+th, td {
+  border: 1px solid #3a4b66;
+  padding: 4px;
+  text-align: center;
+  font-size: 12px;
+}
+
+th {
+  background-color: #2a3b57;
+  position: sticky;
+  top: 0;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.effect-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.effect-checkbox input[type="checkbox"] {
+  width: 12px;
+  height: 12px;
+  margin: 0;
+}
+
+.button-group {
+  display: flex;
+  gap: 6px;
+}
+
+button {
+  padding: 3px 12px;
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+  color: white;
+  font-size: 12px;
+  height: 22px;
+  line-height: 16px;
+}
+
+.search-btn, .reset-btn {
+  padding: 2px 8px;
+  height: 20px;
+  line-height: 16px;
+}
+
+.search-btn {
+  background-color: #1890ff;
+}
+
+.reset-btn {
+  background-color: #666;
+}
+
+.cancel-btn {
+  background-color: #666;
+}
+
+.confirm-btn {
+  background-color: #1890ff;
+}
+
+button:hover {
+  opacity: 0.8;
+}
+
+/* 自定义滚动条样式 */
+.table-container::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.table-container::-webkit-scrollbar-thumb {
+  background: #3a4b66;
+  border-radius: 2px;
+}
+
+.table-container::-webkit-scrollbar-track {
+  background: #1e2c42;
+}
+</style>
diff --git a/web/src/components/TopBar.vue b/web/src/components/TopBar.vue
index b02fe9e..a61454f 100644
--- a/web/src/components/TopBar.vue
+++ b/web/src/components/TopBar.vue
@@ -8,12 +8,18 @@
             <span class="date">2022年5月8日<br>星期天</span>
              <span class="temp">10-15℃</span>
             <span class="weather">晴转多云<br>微风≤2级</span>
+            <button @click="openTaskModal" class="open-modal-button">打开任务选择</button>
         </div>
     </div>
 </template>
 <script>
 export default {
     name:'TopBar',
+    methods: {
+        openTaskModal() {
+            this.$emit('open-task-modal');
+        },
+    }
 }
 </script>
 <style>
@@ -76,4 +82,18 @@ export default {
     line-height: 30px;
     padding-top:5px;
 }
+.open-modal-button {
+    float: right;
+    margin-right: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+.open-modal-button:hover {
+    background-color: #0056b3;
+}
 </style>
\ No newline at end of file
diff --git a/web/src/webrtc.js b/web/src/webrtc.js
index f5af971..d4952cd 100644
--- a/web/src/webrtc.js
+++ b/web/src/webrtc.js
@@ -1170,7 +1170,7 @@ function emitDescriptor(messageType, descriptor) {
     byteIdx++;
     data.setUint16(byteIdx, descriptorAsString.length, true);
     byteIdx += 2;
-    for (i = 0; i < descriptorAsString.length; i++) {
+    for (let i = 0; i < descriptorAsString.length; i++) {
         data.setUint16(byteIdx, descriptorAsString.charCodeAt(i), true);
         byteIdx += 2;
     }
@@ -1181,6 +1181,7 @@ function emitDescriptor(messageType, descriptor) {
 // JavaScript as opposed to pressing a button which is part of the pixel
 // streamed UI from the UE4 client.
 function emitUIInteraction(descriptor) {
+    console.log("emitUIInteraction");
     emitDescriptor(MessageType.UIInteraction, descriptor);
 }