diff --git a/app/View/Components/Filter.php b/app/View/Components/Filter.php
new file mode 100644
index 00000000..669b500c
--- /dev/null
+++ b/app/View/Components/Filter.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class Filter extends Component
+{
+    public string $url;
+    public array $queries;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(string $url)
+    {
+        $this->url = $url;
+        $this->queries = request()->query() ?? [];
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.filter');
+    }
+}
diff --git a/resources/views/admin/layouts/master.blade.php b/resources/views/admin/layouts/master.blade.php
index fbd2b626..1a127308 100644
--- a/resources/views/admin/layouts/master.blade.php
+++ b/resources/views/admin/layouts/master.blade.php
@@ -1,15 +1,15 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    @stack('header')
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
+  @stack('header')
 </head>
 <body>
-    @yield('content')
+  @yield('content')
 </body>
 
 @stack('footer')
diff --git a/resources/views/admin/pages/products/index.blade.php b/resources/views/admin/pages/products/index.blade.php
index 6b676e21..0d6c077b 100644
--- a/resources/views/admin/pages/products/index.blade.php
+++ b/resources/views/admin/pages/products/index.blade.php
@@ -2,6 +2,9 @@
 
 @section('content')
     <a href="{{ route('admin.products.create') }}">Create</a>
+
+    <x-filter :url="route('admin.products.index')" />
+
     <table>
         @foreach ($products as $product)
             <tr>
@@ -15,3 +18,4 @@
         @endforeach
     </table>
 @endsection
+
diff --git a/resources/views/components/filter.blade.php b/resources/views/components/filter.blade.php
new file mode 100644
index 00000000..d38a7751
--- /dev/null
+++ b/resources/views/components/filter.blade.php
@@ -0,0 +1,31 @@
+<div id="filter-app">
+  <input type="text" v-model="keyword">
+  <button type="button" @click="search">筛选</button>
+</div>
+
+@push('footer')
+  <script>
+    new Vue({
+      el: '#filter-app',
+      data: {
+        keyword: ''
+      },
+      methods: {
+        search() {
+          let queries = @json($queries);
+          let url = @json($url);
+
+          if (this.keyword != '') {
+            queries['keyword'] = this.keyword;
+          }
+
+          if (Object.keys(queries).length) {
+            url = url + '?' + new URLSearchParams(queries).toString();
+          }
+
+          window.location = url;
+        }
+      }
+    });
+  </script>
+@endpush
