diff --git a/lib/zin/wg/popovers/v1.php b/lib/zin/wg/popovers/v1.php
index 90c8fc98b7..f509727059 100644
--- a/lib/zin/wg/popovers/v1.php
+++ b/lib/zin/wg/popovers/v1.php
@@ -25,8 +25,8 @@ class popovers extends wg
 
     protected function build()
     {
-        $trigger = $this->block('trigger')[0];
-        $target  = $this->block('target')[0];
+        $trigger = $this->block('trigger')[0]->children()[0];
+        $target  = $this->block('target')[0]->children()[0];
         $trigger->setProp('data-zin-id', $trigger->gid);
         $trigger->setProp('data-target', "[data-zin-id='{$target->gid}']");
         $target->setProp('data-zin-id', $target->gid);
diff --git a/lib/zin/wg/programmenu/css/v1.css b/lib/zin/wg/programmenu/css/v1.css
index 564a822dc2..0a26c9430f 100644
--- a/lib/zin/wg/programmenu/css/v1.css
+++ b/lib/zin/wg/programmenu/css/v1.css
@@ -1,160 +1,12 @@
-.gg-chevron-down {
-    box-sizing: border-box;
-    position: relative;
-    display: block;
-    transform: scale(var(--ggs,1));
-    width: 22px;
-    height: 22px;
-    border: 2px solid transparent;
-    border-radius: 100px
-}
+.program-menu {width: 200px; max-height: 100%; margin: -5px 0;}
+.program-menu .tree[data-zin-id] {border: 1px solid #E6EAF1; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); overflow-y: auto; width: 200px !important; background-color: #fff; padding-bottom: 20px;}
+.program-menu .tree-item.tree-heading {padding: 16px 10px; font-size: 12px; color: var(--color-slate-600)}
 
-.gg-chevron-down::after {
-    content: "";
-    display: block;
-    box-sizing: border-box;
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    border-bottom: 2px solid;
-    border-right: 2px solid;
-    transform: rotate(45deg);
-    left: 3px;
-    top: 3px;
-    color: #313C52;
-}
+.program-menu .icon-container      {width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid #0066fa;}
+.program-menu .icon-container.down {background-color: inherit;}
+.program-menu .icon-container.up   {background-color: #0066fa;}
 
-.gg-chevron-up {
-    box-sizing: border-box;
-    position: relative;
-    display: block;
-    transform: scale(var(--ggs,1));
-    width: 22px;
-    height: 22px;
-    border: 2px solid transparent;
-    border-radius: 100px
-}
-
-.gg-chevron-up::after {
-    content: "";
-    display: block;
-    box-sizing: border-box;
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    border-top: 2px solid;
-    border-right: 2px solid;
-    transform: rotate(-45deg);
-    left: 3px;
-    bottom: 3px;
-    color: #FCFDFE;
-}
-
-.program-menu .menu-item > a:hover {
-    background: #EFF5FF;
-    color: #313C52;
-}
-
-.program-menu .has-nested-menu > .menu.menu-nested {
-    background-color: #fff;
-}
-
-.program-menu .menu {
-    padding: 0;
-}
-
-.program-menu .menu-item.active {
-    color: #2e7fff;
-}
-
-.program-menu {
-    width: 200px;
-    max-height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    margin: -5px 0;
-}
-
-.program-menu > header {
-    height: 40px;
-    border: 1px solid #2e7fff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    padding-left: 12px;
-    flex: none;
-    border-radius: 2px;
-}
-
-.program-menu > header .icon-close {
-    cursor: pointer;
-    padding: 12px;
-}
-
-.program-menu > .menu {
-    border: 1px solid #E6EAF1;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    flex: 1 1 auto;
-    flex-direction: column;
-    overflow-y: auto;
-    width: 200px !important;
-}
-
-.program-menu > .menu.show {
-    display: flex;
-}
-
-.program-menu-subtitle {
-    padding: 8px 8px 4px 8px;
-    flex: none;
-    z-index: 10;
-    background-color: #fff;
-    width: 180px;
-}
-
-.program-menu .title-container {
-    display: flex;
-    column-gap: 8px;
-}
-
-.program-menu .title-container > span {
-    font-size: 13px;
-    line-height: 20px;
-    font-weight: bold;
-}
-
-.program-menu .icon-container {
-    width: 20px;
-    height: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    border: 1px solid #0066fa;
-}
-
-.program-menu .icon-container.down {
-    background-color: inherit;
-}
-
-.program-menu .icon-container.up {
-    background-color: #0066fa;
-}
-
-.program-menu [data-toggle="dropdown"] .icon-container.up {
-    display: none;
-}
-
-.program-menu [data-toggle="dropdown"] .icon-container.down {
-    display: flex;
-}
-
-.program-menu .with-dropdown-show[data-toggle="dropdown"] .icon-container.down {
-    display: none;
-}
-
-.program-menu .with-dropdown-show[data-toggle="dropdown"] .icon-container.up {
-    display: flex;
-}
+.program-menu[data-show="0"] .icon-container.up   {display: none;}
+.program-menu[data-show="1"] .icon-container.up   {display: flex;}
+.program-menu[data-show="0"] .icon-container.down {display: flex;}
+.program-menu[data-show="1"] .icon-container.down {display: none;}
diff --git a/lib/zin/wg/programmenu/js/v1.js b/lib/zin/wg/programmenu/js/v1.js
new file mode 100644
index 0000000000..34781635de
--- /dev/null
+++ b/lib/zin/wg/programmenu/js/v1.js
@@ -0,0 +1,5 @@
+function toggleIcon() {
+    const $pm = $(e.target).closest('.program-menu');
+    const show = $pm.attr('data-show');
+    $pm.attr('data-show', (++show) % 2);
+}
diff --git a/lib/zin/wg/programmenu/v1.php b/lib/zin/wg/programmenu/v1.php
index dbe49e219a..01928cad0b 100644
--- a/lib/zin/wg/programmenu/v1.php
+++ b/lib/zin/wg/programmenu/v1.php
@@ -6,11 +6,11 @@ class programMenu extends wg
     private $programs = array();
 
     protected static $defineProps = array(
-        'programs?:array',
-        'activeClass?:string',
-        'activeIcon?:string',
-        'activeKey?:string',
-        'closeLink?:string'
+        'programs?: array',
+        'activeClass?: string="active"',
+        'activeIcon?: string="check"',
+        'activeKey?: string',
+        'closeLink?: string'
     );
 
     public static function getPageCSS(): string|false
@@ -18,6 +18,11 @@ class programMenu extends wg
         return file_get_contents(__DIR__ . DS . 'css' . DS . 'v1.css');
     }
 
+    public static function getPageJS(): string|false
+    {
+        return file_get_contents(__DIR__ . DS . 'js' . DS . 'v1.js');
+    }
+
     private function buildMenuTree($parent, $parentID)
     {
         $children = $this->getChildProgram($parentID);
@@ -40,13 +45,13 @@ class programMenu extends wg
     private function getTitle($activeKey)
     {
         global $lang;
-
         if(empty($activeKey)) return $lang->program->all;
 
         foreach($this->programs as $program)
         {
             if($program->id == $activeKey) return $program->name;
         }
+
         return $lang->program->all;
     }
 
@@ -55,65 +60,71 @@ class programMenu extends wg
         return array_filter($this->programs, function($program) use($id) {return $program->parent == $id;});
     }
 
-    private function setMenuTreeProps()
+    private function getTreeProps()
     {
-        if(!empty($this->prop('programs'))) $this->programs = $this->prop('programs');
-        $this->setProp('programs', null);
         $items = $this->buildMenuTree(array(), 0);
         array_unshift($items, array('type' => 'heading', 'text' => '筛选项目集'));
-        $this->setProp('items', $items);
-        $this->setProp('commonItemProps', array('item' => array('className' => 'not-hide-menu')));
-        $this->setProp('isDropdownMenu', true);
-        $this->setProp('_to', "[data-zin-id='$this->gid']");
-        $this->setDefaultProps(array('activeClass' => 'active', 'activeIcon' => 'check'));
+        return array('items' => $items);
+    }
+
+    private function closeBtn()
+    {
+        $activeKey = $this->prop('activeKey');
+        if(empty($activeKey)) return null;
+
+        return a
+        (
+            set('href', $this->prop('closeLink')),
+            h::i
+            (
+                setClass('icon icon-close p-3 cursor-pointer'),
+                setStyle('color', '#313C52'),
+            )
+        );
     }
 
     protected function build()
     {
-        $this->setMenuTreeProps();
-
-        $activeKey = $this->prop('activeKey');
-        $title     = $this->getTitle($activeKey);
-        $closeBtn  = null;
-
-        if(!empty($activeKey))
-        {
-            $closeBtn = a
-            (
-                set('href', $this->prop('closeLink')),
-                h::i
-                (
-                    setClass('icon icon-close'),
-                    setStyle('color', '#313C52'),
-                )
-            );
-        }
+        $this->programs = $this->prop('programs');
+        $activeKey      = $this->prop('activeKey');
 
         return div
         (
-            setClass('program-menu'),
-            set('data-zin-id', $this->gid),
-            h::header
+            setClass('program-menu col shrink-0'),
+            set('data-show', '0'),
+            popovers
             (
-                set('data-toggle', 'dropdown'),
-                div
+                set::placement('bottom-start'),
+                to::trigger
                 (
-                    setClass('title-container'),
-                    div
+                    button
                     (
-                        setClass('icon-container down'),
-                        h::i(setClass('gg-chevron-down')),
-                    ),
-                    div
-                    (
-                        setClass('icon-container up'),
-                        h::i(setClass('gg-chevron-up')),
-                    ),
-                    span($title)
+                        setClass('h-10 border border-primary flex justify-between items-center cursor-pointer pl-3 rounded'),
+                        on::click('toggleIcon'),
+                        div
+                        (
+                            setClass('flex gap-x-2'),
+                            div
+                            (
+                                setClass('icon-container down'),
+                                icon('angle-down'),
+                            ),
+                            div
+                            (
+                                setClass('icon-container up'),
+                                icon('angle-top', setClass('text-white')),
+                            ),
+                            span
+                            (
+                                setClass('font-bold leading-5'),
+                                $this->getTitle($activeKey),
+                            )
+                        ),
+                        $this->closeBtn(),
+                    )
                 ),
-                $closeBtn
-            ),
-            zui::menutree(inherit($this))
+                to::target(zui::tree(set($this->getTreeProps()))),
+            )
         );
     }
 }