diff --git a/apps/playground/src/helpers/index.tsx b/apps/playground/src/helpers/index.tsx
index 1eeaf5b..1c9ac06 100644
--- a/apps/playground/src/helpers/index.tsx
+++ b/apps/playground/src/helpers/index.tsx
@@ -5,6 +5,7 @@ import { BranchesOutlined, MenuOutlined, QuestionCircleOutlined } from '@ant-des
 import { registerSetter } from '@music163/tango-designer';
 import type { IVariableTreeNode } from '@music163/tango-helpers';
 import { FooSetter } from '../components';
+import { ToggleButton } from '@music163/tango-ui';
 
 export * from './mock-files';
 
@@ -46,8 +47,17 @@ registerSetter({
 // 平台 Logo
 export function Logo() {
   return (
-    <Box width="50px" display="flex" alignItems="center" justifyContent="center" fontSize="20px">
-      <MenuOutlined />
+    <Box width="50px" display="flex" alignItems="center" justifyContent="center" fontSize="14px">
+      <ToggleButton
+        shape="text"
+        items={[
+          { label: '回到首页', key: 'home' },
+          { label: '文档', key: 'doc' },
+          { label: '设置', key: 'setting' },
+        ]}
+      >
+        <MenuOutlined />
+      </ToggleButton>
     </Box>
   );
 }
diff --git a/apps/playground/src/pages/index.tsx b/apps/playground/src/pages/index.tsx
index 7eea67c..4d41fd0 100644
--- a/apps/playground/src/pages/index.tsx
+++ b/apps/playground/src/pages/index.tsx
@@ -20,12 +20,11 @@ import {
   ApiOutlined,
   AppstoreAddOutlined,
   BuildOutlined,
-  ClusterOutlined,
   FunctionOutlined,
   PlusOutlined,
   createFromIconfontCN,
 } from '@ant-design/icons';
-import { Action } from '@music163/tango-ui';
+import { Action, PackageOutlined } from '@music163/tango-ui';
 import { useState } from 'react';
 
 const menuData = {
@@ -182,7 +181,7 @@ export default function App() {
           <Sidebar.Item
             key="dependency"
             label="依赖"
-            icon={<ClusterOutlined />}
+            icon={<PackageOutlined />}
             isFloat
             width={800}
           />
diff --git a/apps/storybook/src/setting-form.stories.tsx b/apps/storybook/src/setting-form.stories.tsx
index fffca85..030c656 100644
--- a/apps/storybook/src/setting-form.stories.tsx
+++ b/apps/storybook/src/setting-form.stories.tsx
@@ -79,6 +79,11 @@ const prototypeHasBasicProps: IComponentPrototype = {
       title: 'textAreaSetter',
       setter: 'textAreaSetter',
     },
+    {
+      name: 'src',
+      title: 'imageSetter',
+      setter: 'imageSetter',
+    },
     {
       name: 'number',
       title: 'numberSetter',
diff --git a/packages/core/src/models/workspace.ts b/packages/core/src/models/workspace.ts
index 6ba38b8..d57a650 100644
--- a/packages/core/src/models/workspace.ts
+++ b/packages/core/src/models/workspace.ts
@@ -11,6 +11,7 @@ import {
   parseServiceVariablePath,
   parseStoreVariablePath,
   uniq,
+  setValue,
 } from '@music163/tango-helpers';
 import {
   prototype2jsxElement,
@@ -741,6 +742,7 @@ export class Workspace extends EventTarget implements IWorkspace {
    * 更新依赖，没有就添加
    * @param name
    * @param version
+   * FIXME: 参数3的设置需要重新考虑下
    */
   updateDependency(
     name: string,
@@ -763,15 +765,12 @@ export class Workspace extends EventTarget implements IWorkspace {
         if (!packages) {
           return undefined;
         }
-        if (options?.package || packages[name]) {
-          packages[name] = {
-            type: packages[name]?.type,
-            // 如果没有传入 package 信息，则沿用 tango.config.json 中已记录的数据
-            // 如果传入了，则全量使用传入的信息，适配可能在某个版本中如 resources 等字段被删除的情况
-            ...(options?.package || packages[name]),
-            version,
-          };
-        }
+
+        setValue(packages, name, {
+          ...packages[name], // 保留原有的配置
+          version, // 更新版本号
+          ...options?.package, // 更新 package 配置
+        });
 
         return packages;
       })
diff --git a/packages/designer/src/setters/expression-setter.tsx b/packages/designer/src/setters/expression-setter.tsx
index 816309a..2cbcc8a 100644
--- a/packages/designer/src/setters/expression-setter.tsx
+++ b/packages/designer/src/setters/expression-setter.tsx
@@ -3,8 +3,8 @@ import { Box, Text, css } from 'coral-system';
 import { Dropdown, Button } from 'antd';
 import { isValidExpressionCode } from '@music163/tango-core';
 import { getValue, IVariableTreeNode, noop } from '@music163/tango-helpers';
-import { CloseCircleFilled, ExpandAltOutlined, MenuOutlined } from '@ant-design/icons';
-import { Panel, InputCode, Action, DragPanel } from '@music163/tango-ui';
+import { CloseCircleFilled, MenuOutlined } from '@ant-design/icons';
+import { Panel, InputCode, Action, DragPanel, PopOutOutlined } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { useWorkspace, useWorkspaceData } from '@music163/tango-context';
 import { VariableTree } from '../components';
@@ -197,8 +197,7 @@ export function ExpressionPopover({
       width={700}
       height={615}
       resizeable
-      title={`将 ${selectNodePath}/${title} 设置为引用变量或自定义表达式`}
-      extra={subTitle}
+      title={`使用代码设置 ${selectNodePath} 组件的${title}`}
       onOpenChange={(open) => {
         if (!open) {
           setExp(undefined);
@@ -207,7 +206,7 @@ export function ExpressionPopover({
       }}
       body={
         <Box display="flex" flexDirection="column">
-          <Panel shape="solid">
+          <Box p="m">
             <InputCode
               shape="inset"
               minHeight="56px"
@@ -216,26 +215,33 @@ export function ExpressionPopover({
               placeholder={placeholder}
               onChange={handleExpInputChange}
               onBlur={() => {
-                setError(expressionValueValidate(exp));
+                if (exp) {
+                  setError(expressionValueValidate(exp));
+                }
               }}
               autoCompleteContext={evaluateContext}
               autoCompleteOptions={autoCompleteOptions}
             />
             {error ? (
-              <Text color="red" fontSize="12px">
+              <Text color="red" fontSize="12px" as="p">
                 出错了！输入的表达式存在语法错误，请修改后再提交！
               </Text>
-            ) : (
-              <Text fontSize="12px" color="text3">
-                说明：你可以在上面的代码输入框里输入常规的 javascript 代码，还可以直接使用 jsx
-                代码，但需要符合该属性的接受值定义。
+            ) : null}
+            {subTitle && (
+              <Text fontSize="12px" color="text3" as="p">
+                {subTitle}
               </Text>
             )}
-          </Panel>
+            <Text fontSize="12px" color="text3" as="p">
+              说明：你可以在上面的代码输入框里输入常规的 javascript 代码，还可以直接使用 jsx
+              代码，但需要符合该属性的接受值定义。
+            </Text>
+          </Box>
           <Panel
             title="从变量列表中选中"
             shape="solid"
-            borderTop="0"
+            borderLeft="0"
+            borderRight="0"
             flex={1}
             bodyProps={{
               style: {
@@ -333,7 +339,12 @@ export function ExpressionPopover({
       )}
     >
       {children || (
-        <Action tooltip="打开表达式变量选择面板" icon={<ExpandAltOutlined />} size="small" />
+        <Action
+          tooltip="弹出代码编辑和变量选择面板"
+          tooltipProps={{ placement: 'topLeft' }}
+          icon={<PopOutOutlined />}
+          size="small"
+        />
       )}
     </DragPanel>
   );
diff --git a/packages/designer/src/sidebar/dependency-panel.tsx b/packages/designer/src/sidebar/dependency-panel.tsx
index b0e63ab..e52fb62 100644
--- a/packages/designer/src/sidebar/dependency-panel.tsx
+++ b/packages/designer/src/sidebar/dependency-panel.tsx
@@ -68,17 +68,6 @@ export const DependencyPanel = observer(
       [dependencies, baseDependencies, bizDependencies, packages, packageNames],
     );
 
-    // 业务组件依赖
-    const bizDeps = useMemo(
-      () =>
-        bizDependencies?.map((name: string) => ({
-          name,
-          version: dependencies[name] ?? packages?.[name]?.version,
-          package: packages?.[name],
-        })) || [],
-      [bizDependencies, dependencies, packages],
-    );
-
     // 基础包
     const baseDeps = useMemo(
       () =>
diff --git a/packages/designer/src/simulator/selection.tsx b/packages/designer/src/simulator/selection.tsx
index 8739fdf..8cad201 100644
--- a/packages/designer/src/simulator/selection.tsx
+++ b/packages/designer/src/simulator/selection.tsx
@@ -155,18 +155,20 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
       css={selectionBoxStyle}
       style={style}
     >
-      <>
-        <ComponentsPopover type="before">
-          <Tooltip title={`在 ${selectedNodeName} 的前方添加兄弟节点`}>
-            <SelectionHelper icon={<PlusOutlined />} css={topAddSiblingBtnStyle} />
-          </Tooltip>
-        </ComponentsPopover>
-        <ComponentsPopover type="after">
-          <Tooltip title={`在 ${selectedNodeName} 的后方添加兄弟节点`}>
-            <SelectionHelper icon={<PlusOutlined />} css={bottomAddSiblingBtnStyle} />
-          </Tooltip>
-        </ComponentsPopover>
-      </>
+      {!isPage ? (
+        <>
+          <ComponentsPopover type="before">
+            <Tooltip title={`在 ${selectedNodeName} 的前方添加兄弟节点`}>
+              <SelectionHelper icon={<PlusOutlined />} css={topAddSiblingBtnStyle} />
+            </Tooltip>
+          </ComponentsPopover>
+          <ComponentsPopover type="after">
+            <Tooltip title={`在 ${selectedNodeName} 的后方添加兄弟节点`}>
+              <SelectionHelper icon={<PlusOutlined />} css={bottomAddSiblingBtnStyle} />
+            </Tooltip>
+          </ComponentsPopover>
+        </>
+      ) : null}
       {showActions && (
         <SelectionHelpers align={selectionHelpersAlign}>
           <SelectionHelper
@@ -204,7 +206,7 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
             }
           />
           <SelectionToolSet>{!isPage && actions}</SelectionToolSet>
-          {isFromCurrentFile && prototype?.hasChildren !== false && (
+          {isFromCurrentFile && prototype.hasChildren && (
             <ComponentsPopover>
               <Tooltip title="快捷添加子元素">
                 <SelectionHelper icon={<PlusOutlined />} />
diff --git a/packages/setting-form/src/setters/register.ts b/packages/setting-form/src/setters/register.tsx
similarity index 88%
rename from packages/setting-form/src/setters/register.ts
rename to packages/setting-form/src/setters/register.tsx
index ae78c65..52c7717 100644
--- a/packages/setting-form/src/setters/register.ts
+++ b/packages/setting-form/src/setters/register.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { CodeSetter } from './code-setter';
 import { BoolSetter } from './bool-setter';
 import { IdSetter } from './id-setter';
@@ -36,6 +37,10 @@ const BASIC_SETTERS: IFormItemCreateOptions[] = [
     name: 'idSetter',
     component: IdSetter,
   },
+  {
+    name: 'imageSetter',
+    render: (props) => <TextSetter placeholder="请提供图片地址" {...props} />,
+  },
 ];
 
 let registered = false;
diff --git a/packages/ui/src/action.tsx b/packages/ui/src/action.tsx
index b1b266c..ab855d6 100644
--- a/packages/ui/src/action.tsx
+++ b/packages/ui/src/action.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from 'antd';
+import { Tooltip, TooltipProps } from 'antd';
 import React from 'react';
 import { css, Button, Link, HTMLCoralProps } from 'coral-system';
 import cx from 'classnames';
@@ -48,6 +48,10 @@ export interface ActionProps extends HTMLCoralProps<any> {
    * 提示文本
    */
   tooltip?: string;
+  /**
+   * Tooltip属性透传
+   */
+  tooltipProps?: TooltipProps;
   /**
    * 超链接
    */
@@ -75,6 +79,7 @@ export interface ActionProps extends HTMLCoralProps<any> {
 export function Action({
   icon,
   tooltip,
+  tooltipProps,
   href,
   size,
   shape,
@@ -110,7 +115,11 @@ export function Action({
   }
 
   if (tooltip) {
-    return <Tooltip title={tooltip}>{ret}</Tooltip>;
+    return (
+      <Tooltip title={tooltip} {...tooltipProps}>
+        {ret}
+      </Tooltip>
+    );
   }
   return ret;
 }
diff --git a/packages/ui/src/collapse-panel.tsx b/packages/ui/src/collapse-panel.tsx
index 5bb0099..0876d3f 100644
--- a/packages/ui/src/collapse-panel.tsx
+++ b/packages/ui/src/collapse-panel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, HTMLCoralProps, css } from 'coral-system';
-import { UpOutlined } from '@ant-design/icons';
+import { CaretRightOutlined } from '@ant-design/icons';
 import { useControllableState } from '@music163/tango-helpers';
 
 export interface CollapsePanelProps extends Omit<HTMLCoralProps<'div'>, 'title'> {
@@ -39,8 +39,10 @@ export interface CollapsePanelProps extends Omit<HTMLCoralProps<'div'>, 'title'>
 const headerStyle = css`
   user-select: none;
 
-  .anticon-up {
-    margin-right: 8px;
+  .anticon-caret-right {
+    width: 10px;
+    height: 10px;
+    margin-right: 4px;
     color: var(--tango-colors-text2);
     transition: transform 0.2s ease 0s;
   }
@@ -67,7 +69,7 @@ export function CollapsePanel(props: CollapsePanelProps) {
   });
 
   const iconStyle = {
-    transform: collapsed ? undefined : 'rotate(-180deg)',
+    transform: collapsed ? undefined : 'rotate(90deg)',
   };
 
   const stickHeaderProps: HTMLCoralProps<'div'> = stickyHeader
@@ -104,7 +106,7 @@ export function CollapsePanel(props: CollapsePanelProps) {
         css={headerStyle}
       >
         <Box display="flex" alignItems="center" fontSize="14px" fontWeight="500">
-          <UpOutlined style={iconStyle} />
+          <CaretRightOutlined style={iconStyle} />
           {title}
         </Box>
         <Box>{extra}</Box>
diff --git a/packages/ui/src/drag-panel.tsx b/packages/ui/src/drag-panel.tsx
index b0641b8..b58d76e 100644
--- a/packages/ui/src/drag-panel.tsx
+++ b/packages/ui/src/drag-panel.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { Box, Text, styled } from 'coral-system';
-import { Popover, PopoverProps, IconFont } from './';
 import Draggable from 'react-draggable';
-import { CloseOutlined } from '@ant-design/icons';
+import { CloseOutlined, HolderOutlined } from '@ant-design/icons';
 import { noop } from '@music163/tango-helpers';
+import { Popover, PopoverProps } from './popover';
 
 // Dragging over an iframe stops dragging when moving the mouse too fast #613
 // https://github.com/react-grid-layout/react-draggable/issues/613
@@ -143,7 +143,7 @@ export function DragPanel({
           >
             <DragPanelHeader className="drag-panel-header">
               <Box fontSize="12px" color="text2">
-                <IconFont type="icon-applications" />
+                <HolderOutlined />
                 <Text marginLeft={'5px'}>{title}</Text>
               </Box>
               <Box color="text2" fontSize="12px" display="flex" alignItems="center">
diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts
index 0de2dce..436136e 100644
--- a/packages/ui/src/icons/index.ts
+++ b/packages/ui/src/icons/index.ts
@@ -2,10 +2,12 @@ export * from './create-icon';
 export * from './code-outlined';
 export * from './line-dashed-outlined';
 export * from './line-solid-outlined';
+export * from './package-outlined';
 export * from './open-panel-filled-left-outlined';
 export * from './open-panel-filled-right-outlined';
 export * from './open-panel-left-outlined';
 export * from './open-panel-right-outlined';
 export * from './undo-outlined';
+export * from './pop-out-outlined';
 export * from './redo-outlined';
 export * from './dual-outlined';
diff --git a/packages/ui/src/icons/package-outlined.tsx b/packages/ui/src/icons/package-outlined.tsx
new file mode 100644
index 0000000..181dcac
--- /dev/null
+++ b/packages/ui/src/icons/package-outlined.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const PackageOutlinedSvg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+  >
+    <path d="M915.2 284.8c0-3.2 0-3.2-3.2-6.4 0-3.2-3.2-3.2-6.4-6.4-9.6-12.8-22.4-25.6-38.4-35.2l-297.6-169.6c-35.2-22.4-80-22.4-118.4 0L313.6 147.2c-6.4 3.2-12.8 6.4-16 12.8L153.6 240c-12.8 9.6-25.6 22.4-38.4 35.2 0 3.2-3.2 3.2-3.2 6.4s0 3.2-3.2 6.4c-6.4 16-12.8 35.2-12.8 54.4v342.4c0 41.6 22.4 80 57.6 102.4l297.6 169.6c12.8 6.4 28.8 12.8 41.6 16 3.2 3.2 9.6 3.2 16 3.2s9.6-3.2 16-3.2c16-3.2 28.8-6.4 41.6-16l297.6-169.6c35.2-22.4 57.6-60.8 57.6-102.4V342.4c6.4-19.2 0-38.4-6.4-57.6z m-428.8-160c9.6-3.2 16-6.4 25.6-6.4 9.6 0 19.2 3.2 25.6 6.4L832 291.2l-128 73.6-316.8-182.4 99.2-57.6z m25.6 352L192 291.2l128-73.6 316.8 182.4-124.8 76.8zM185.6 729.6c-16-9.6-25.6-28.8-25.6-48V345.6l320 185.6V896l-294.4-166.4z m652.8 0L544 896V531.2l320-185.6v336c0 19.2-9.6 38.4-25.6 48z" />
+  </svg>
+);
+
+export const PackageOutlined = createIcon(PackageOutlinedSvg, 'PackageOutlined');
diff --git a/packages/ui/src/icons/pop-out-outlined.tsx b/packages/ui/src/icons/pop-out-outlined.tsx
new file mode 100644
index 0000000..8c5ece9
--- /dev/null
+++ b/packages/ui/src/icons/pop-out-outlined.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const Svg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+  >
+    <path d="M832 544a32 32 0 0 1 64 0V832a128 128 0 0 1-128 128H192a128 128 0 0 1-128-128V256a128 128 0 0 1 128-128h288a32 32 0 0 1 0 64H192a64 64 0 0 0-64 64v576a64 64 0 0 0 64 64h576a64 64 0 0 0 64-64V544z m-327.68 21.696a32 32 0 1 1-45.184-45.248L851.52 128H672a32 32 0 0 1 0-64H896a64 64 0 0 1 64 64v224a32 32 0 0 1-64 0V174.08L504.32 565.632z" />
+  </svg>
+);
+
+export const PopOutOutlined = createIcon(Svg, 'PopOutOutlined');
diff --git a/packages/ui/src/toggle-button.tsx b/packages/ui/src/toggle-button.tsx
index 93bb2a6..ce7e7b7 100644
--- a/packages/ui/src/toggle-button.tsx
+++ b/packages/ui/src/toggle-button.tsx
@@ -14,8 +14,10 @@ const buttonStyle = css`
   padding: 0 8px;
 
   .anticon-down {
-    font-size: 12px !important;
+    width: 10px;
+    height: 10px;
     margin-left: 4px;
+    transition: transform 0.1s ease-in;
   }
 
   &.size-s {
@@ -57,6 +59,10 @@ const buttonStyle = css`
 
     &:hover {
       background-color: rgba(197, 197, 197, 0.16);
+
+      .anticon-down {
+        transform: translateY(2px);
+      }
     }
 
     &.disabled {
@@ -154,6 +160,10 @@ export interface ToggleButtonProps extends Omit<HTMLCoralProps<'button'>, 'type'
    * 下拉菜单的属性
    */
   dropdownProps?: DropDownProps;
+  /**
+   * 是否显示下拉图标
+   */
+  showDropdownIcon?: boolean;
 }
 
 /**
@@ -176,6 +186,7 @@ export function ToggleButton(props: ToggleButtonProps) {
     overlayStyle,
     onItemClick,
     dropdownProps = {},
+    showDropdownIcon = true,
     ...rest
   } = props;
   const clazz = cx({
@@ -198,7 +209,7 @@ export function ToggleButton(props: ToggleButtonProps) {
         )}
         {children}
       </Box>
-      {showDropdown ? <DownOutlined /> : null}
+      {showDropdown && showDropdownIcon ? <DownOutlined /> : null}
     </Button>
   );