diff --git a/core/core-frontend/src/assets/img/bg-mobile.png b/core/core-frontend/src/assets/img/bg-mobile.png
index 946b99d250..70f2a5edd1 100644
Binary files a/core/core-frontend/src/assets/img/bg-mobile.png and b/core/core-frontend/src/assets/img/bg-mobile.png differ
diff --git a/core/core-frontend/src/assets/svg/icon_phone_outlined.svg b/core/core-frontend/src/assets/svg/icon_phone_outlined.svg
index 4e1f3c7f20..92ef5b1b34 100644
--- a/core/core-frontend/src/assets/svg/icon_phone_outlined.svg
+++ b/core/core-frontend/src/assets/svg/icon_phone_outlined.svg
@@ -1,5 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.66666 3.66667H9.33332V5H6.66666V3.66667Z" fill="#1F2329"/>
-<path d="M8.99999 11H6.99999V12.3333H8.99999V11Z" fill="#1F2329"/>
-<path d="M3.33332 1C2.96513 1 2.66666 1.29848 2.66666 1.66667V14.3333C2.66666 14.7015 2.96513 15 3.33332 15H12.6667C13.0348 15 13.3333 14.7015 13.3333 14.3333V1.66667C13.3333 1.29848 13.0348 1 12.6667 1H3.33332ZM3.99999 2.33333H12V13.6667H3.99999V2.33333Z" fill="#1F2329"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66666 3.66667H9.33332V5H6.66666V3.66667Z" />
+<path d="M8.99999 11H6.99999V12.3333H8.99999V11Z" />
+<path d="M3.33332 1C2.96513 1 2.66666 1.29848 2.66666 1.66667V14.3333C2.66666 14.7015 2.96513 15 3.33332 15H12.6667C13.0348 15 13.3333 14.7015 13.3333 14.3333V1.66667C13.3333 1.29848 13.0348 1 12.6667 1H3.33332ZM3.99999 2.33333H12V13.6667H3.99999V2.33333Z" />
 </svg>
diff --git a/core/core-frontend/src/assets/svg/mobile-checkbox.svg b/core/core-frontend/src/assets/svg/mobile-checkbox.svg
index 7ccf53109d..2bee03e0ed 100644
--- a/core/core-frontend/src/assets/svg/mobile-checkbox.svg
+++ b/core/core-frontend/src/assets/svg/mobile-checkbox.svg
@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z" fill="#3370FF"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z" />
 <path d="M11.5881 4.90381L12.3966 5.71231C12.4291 5.74481 12.4549 5.78339 12.4725 5.82586C12.4901 5.86833 12.4992 5.91384 12.4992 5.95981C12.4992 6.00577 12.4901 6.05129 12.4725 6.09375C12.4549 6.13622 12.4291 6.17481 12.3966 6.20731L7.17813 11.4258C7.14563 11.4583 7.10705 11.4841 7.06458 11.5017C7.02212 11.5193 6.9766 11.5283 6.93063 11.5283C6.88467 11.5283 6.83915 11.5193 6.79669 11.5017C6.75422 11.4841 6.71564 11.4583 6.68313 11.4258L3.70213 8.44481C3.66963 8.41231 3.64385 8.37372 3.62625 8.33126C3.60866 8.28879 3.59961 8.24327 3.59961 8.19731C3.59961 8.15134 3.60866 8.10583 3.62625 8.06336C3.64385 8.0209 3.66963 7.98231 3.70213 7.94981L4.51063 7.14181C4.54314 7.1093 4.58172 7.08352 4.62419 7.06593C4.66665 7.04834 4.71217 7.03928 4.75813 7.03928C4.8041 7.03928 4.84962 7.04834 4.89208 7.06593C4.93455 7.08352 4.97313 7.1093 5.00563 7.14181L6.93063 9.06631L11.0936 4.90331C11.1261 4.8708 11.1647 4.84502 11.2072 4.82743C11.2497 4.80984 11.2952 4.80078 11.3411 4.80078C11.3871 4.80078 11.4326 4.80984 11.4751 4.82743C11.5175 4.84502 11.5556 4.8713 11.5881 4.90381Z" fill="white"/>
 </svg>
diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index 712cbe22b2..ca560cbaa9 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -186,10 +186,6 @@ const multiplexingCanvasOpen = () => {
   multiplexingRef.value.dialogInit()
 }
 
-const mobileConfig = () => {
-  useEmitt().emitter.emit('mobileConfig')
-}
-
 eventBus.on('preview', previewInner)
 eventBus.on('save', saveCanvasWithCheck)
 eventBus.on('clearCanvas', clearCanvas)
@@ -198,6 +194,10 @@ const openDataBoardSetting = () => {
   dvMainStore.setCurComponent({ component: null, index: null })
 }
 
+const openMobileSetting = () => {
+  useEmitt().emitter.emit('mobileConfig')
+}
+
 const batchDelete = () => {
   const componentDataTemp = deepCopy(componentData.value)
   componentDataTemp.forEach(component => {
@@ -423,12 +423,6 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
             is-label
             @customClick="multiplexingCanvasOpen"
           ></component-button-label>
-          <component-button-label
-            icon-name="icon_copy_filled"
-            title="移动端"
-            is-label
-            @customClick="mobileConfig"
-          ></component-button-label>
         </div>
       </template>
 
@@ -449,6 +443,14 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
               icon-name="dv-dashboard"
             />
           </el-tooltip>
+          <div class="divider"></div>
+          <el-tooltip effect="dark" content="移动端配置" placement="bottom">
+            <component-button
+              tips="移动端配置"
+              @custom-click="openMobileSetting"
+              icon-name="icon_phone_outlined"
+            />
+          </el-tooltip>
         </template>
 
         <el-dropdown v-if="editMode === 'edit'" trigger="hover">
@@ -647,6 +649,12 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
     display: flex;
     align-items: center;
     justify-content: right;
+
+    .divider {
+      background: #ffffff4d;
+      width: 1px;
+      height: 18px;
+    }
   }
   .custom-el-icon {
     margin-left: 15px;
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index 36c4038ceb..ea0c530475 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -932,6 +932,7 @@ onMounted(() => {
     z-index: 2;
     font-size: 16px;
     cursor: pointer;
+    color: var(--ed-color-primary);
   }
 }
 
diff --git a/core/core-frontend/src/components/visualization/ComponentButton.vue b/core/core-frontend/src/components/visualization/ComponentButton.vue
index 626b022b27..730d944f3e 100644
--- a/core/core-frontend/src/components/visualization/ComponentButton.vue
+++ b/core/core-frontend/src/components/visualization/ComponentButton.vue
@@ -24,7 +24,9 @@ const emits = defineEmits(['customClick'])
     v-on:click="emits('customClick')"
   >
     <el-col :span="24" class="group_inner" :class="{ 'inner-active': active }">
-      <Icon class="toolbar-icon" :name="iconName" />
+      <el-icon class="toolbar-icon">
+        <Icon :name="iconName" />
+      </el-icon>
       <span>{{ title }}</span>
     </el-col>
   </el-row>
@@ -35,17 +37,35 @@ const emits = defineEmits(['customClick'])
   padding-right: 10px;
 }
 .group_inner {
-  padding: 5px;
   display: flex;
   cursor: pointer;
-  flex-direction: column;
   align-items: center;
+  justify-content: center;
   border-radius: 4px;
+  color: #ffffff99;
+  position: relative;
+  &::after {
+    content: '';
+    border-radius: 4px;
+    display: none;
+    position: absolute;
+    width: calc(100% + 10px);
+    height: calc(100% + 10px);
+    top: -5px;
+    left: -5px;
+  }
+
   &:hover {
-    background: rgba(255, 255, 255, 0.1);
+    &::after {
+      display: block;
+      background: rgba(255, 255, 255, 0.1);
+    }
   }
   &:active {
-    background: rgba(255, 255, 255, 0.2);
+    &::after {
+      display: block;
+      background: rgba(255, 255, 255, 0.2);
+    }
   }
   span {
     float: left;
@@ -65,8 +85,6 @@ const emits = defineEmits(['customClick'])
 }
 
 .toolbar-icon {
-  float: left;
-  width: 20px;
-  height: 20px;
+  font-size: 20px;
 }
 </style>
diff --git a/core/core-frontend/src/components/visualization/common/DragInfo.vue b/core/core-frontend/src/components/visualization/common/DragInfo.vue
index f59e87ba0e..0601e3ad8e 100644
--- a/core/core-frontend/src/components/visualization/common/DragInfo.vue
+++ b/core/core-frontend/src/components/visualization/common/DragInfo.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="drag-info-main">
-    <el-row style="justify-content: center">
-      <Icon style="width: 125px; height: 125px" name="dv-drag-tips"></Icon>
-    </el-row>
-    <el-row class="tips-info"> {{ tips }} </el-row>
+    <template v-if="!mobileInPc">
+      <el-row style="justify-content: center">
+        <Icon style="width: 125px; height: 125px" name="dv-drag-tips"></Icon>
+      </el-row>
+      <el-row class="tips-info"> {{ tips }} </el-row>
+    </template>
+    <div v-else class="mobile-in-pc-tips">请从右侧添加可视化组件</div>
   </div>
 </template>
 
@@ -12,7 +15,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 
 const dvMainStore = dvMainStoreWithOut()
-const { dvInfo } = storeToRefs(dvMainStore)
+const { dvInfo, mobileInPc } = storeToRefs(dvMainStore)
 
 const tips =
   '从顶部工具栏中选择组件，添加到这里创建' +
@@ -26,6 +29,15 @@ const tips =
   top: calc(40% - 90px);
   width: 250px;
   height: 180px;
+
+  .mobile-in-pc-tips {
+    color: #646a73;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 28px;
+    text-align: center;
+    margin-top: 40%;
+  }
 }
 
 .tips-info {
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index 07504d56db..f8a07505c1 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -159,7 +159,7 @@ const save = () => {
         {{ dvInfo.name }}
       </div>
       <div class="config-panel-content" v-loading="mobileLoading">
-        <iframe src="./mobile.html#/panel" frameborder="0" width="375" height="640" />
+        <iframe src="./mobile.html#/panel" frameborder="0" width="375" />
       </div>
       <div class="config-panel-foot"></div>
     </div>
@@ -215,7 +215,6 @@ const save = () => {
   width: 100vw;
   position: relative;
   background: #f5f6f7;
-  overflow-y: auto;
 
   .top-bar {
     position: sticky;
@@ -263,7 +262,7 @@ const save = () => {
     height: 854px;
     overflow: hidden;
     background-size: 100% 100% !important;
-    height: 777px;
+    height: calc(100vh - 120px);
     position: absolute;
     top: 104px;
     left: calc(50% - 419px);
@@ -289,20 +288,28 @@ const save = () => {
 
     .config-panel-content {
       width: 100%;
+      height: calc(100% - 130px);
       border-bottom-left-radius: 45px;
       border-bottom-right-radius: 45px;
       overflow: hidden;
+      iframe {
+        height: 100%;
+      }
     }
   }
 
   .mobile-com-list {
     float: right;
     width: 420px;
-    height: 100%;
     background-color: #fff;
     position: relative;
     border-left: rgba(31, 35, 41, 0.15) 1px solid;
-    height: 100%;
+    height: calc(100% - 64px);
+    overflow-y: auto;
+    :deep(.ed-collapse) {
+      --ed-collapse-header-font-size: 12px;
+      --ed-collapse-content-font-size: 12px;
+    }
 
     .config-mobile-sidebar {
       font-size: 14px;
@@ -316,7 +323,7 @@ const save = () => {
       margin-bottom: 8px;
       float: left;
       background: #fff;
-      padding: 31px 4px 36px 4px;
+      padding: 4px;
       border-radius: 4px;
       border: 1px solid #dee0e3;
       &:nth-child(2n) {
diff --git a/core/core-frontend/src/views/mobile/directory/index.vue b/core/core-frontend/src/views/mobile/directory/index.vue
index b82a9e7e8f..a622eb04fa 100644
--- a/core/core-frontend/src/views/mobile/directory/index.vue
+++ b/core/core-frontend/src/views/mobile/directory/index.vue
@@ -49,6 +49,12 @@ const onClickLeft = () => {
     emits('hiddenTabbar', false)
   }
 }
+
+const onClickPanel = () => {
+  directName.value = []
+  directId.value = []
+  activeDirectName.value = ''
+}
 const router = useRouter()
 
 const handleCellClick = ele => {
@@ -114,8 +120,22 @@ onMounted(() => {
         :left-arrow="!!activeDirectName"
         @click-left="onClickLeft"
       />
+      <div class="direct-name-arr" v-if="directName.length">
+        <div @click="onClickPanel" key="仪表板">
+          <span class="label primary-name">仪表板</span>
+          <el-icon>
+            <Icon name="icon_right_outlined"></Icon>
+          </el-icon>
+        </div>
+        <div v-for="(ele, index) in [...directName]" :key="ele">
+          <span class="label">{{ ele }}</span>
+          <el-icon v-if="index !== directName.length - 1">
+            <Icon name="icon_right_outlined"></Icon>
+          </el-icon>
+        </div>
+      </div>
     </van-sticky>
-    <div class="dashboard-cell-group">
+    <div :class="!!directName.length && 'dashboard-cell-group-tab'" class="dashboard-cell-group">
       <DashboardCell
         v-for="ele in activeTableData"
         :key="ele.id"
@@ -136,6 +156,38 @@ onMounted(() => {
     overflow-y: auto;
     height: calc(100vh - 102px);
     margin-top: 8px;
+
+    &.dashboard-cell-group-tab {
+      margin-top: 0;
+      height: calc(100vh - 146px);
+    }
+  }
+
+  .direct-name-arr {
+    height: 44px;
+    padding: 12px 16px;
+    color: #646a73;
+    display: flex;
+    align-items: center;
+    & > div {
+      display: flex;
+      align-items: center;
+    }
+
+    .label {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+
+    .ed-icon {
+      font-size: 12px;
+      margin: 0 4px;
+    }
+
+    .primary-name {
+      color: var(--ed-color-primary);
+    }
   }
 }
 </style>
diff --git a/core/core-frontend/src/views/mobile/home/index.vue b/core/core-frontend/src/views/mobile/home/index.vue
index fef9a79e19..87380b07ac 100644
--- a/core/core-frontend/src/views/mobile/home/index.vue
+++ b/core/core-frontend/src/views/mobile/home/index.vue
@@ -186,6 +186,13 @@ const formatterTime = val => {
     font-weight: 400;
     line-height: 22px;
 
+    .empty-tips {
+      color: #646a73;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+    }
+
     img {
       margin-bottom: 8px;
     }
diff --git a/core/core-frontend/src/views/mobile/login/index.vue b/core/core-frontend/src/views/mobile/login/index.vue
index b9f60dfcbd..d9a23a5035 100644
--- a/core/core-frontend/src/views/mobile/login/index.vue
+++ b/core/core-frontend/src/views/mobile/login/index.vue
@@ -50,6 +50,15 @@ const visible = ref(true)
 const clickRightIcon = () => {
   visible.value = !visible.value
 }
+
+const inputFocus = ref('')
+const handleFocus = val => {
+  inputFocus.value = val
+}
+
+const handleBlur = () => {
+  inputFocus.value = ''
+}
 const onSubmit = async () => {
   if (!checkUsername(username.value) || !validatePwd(password.value)) {
     showToast({
@@ -102,7 +111,10 @@ const usernameEndValidate = ({ status, message }) => {
             name="用户名"
             :style="{ borderColor: !!usernameError ? '#F54A45' : '#bbbfc4' }"
             placeholder="请输入用户名"
+            @blur="handleBlur"
+            :class="inputFocus === 'username' && 'input-focus-primary'"
             @end-validate="usernameEndValidate"
+            @focus="handleFocus('username')"
             :rules="[{ required: true, message: '请填写用户名' }]"
           />
           <div v-if="!!usernameError" class="van-ed-error">
@@ -111,8 +123,11 @@ const usernameEndValidate = ({ status, message }) => {
           <van-field
             v-model="password"
             :type="visible ? 'password' : 'text'"
+            :class="inputFocus === 'password' && 'input-focus-primary'"
             @click-right-icon="clickRightIcon"
             :style="{ borderColor: !!passwordError ? '#F54A45' : '#bbbfc4' }"
+            @focus="handleFocus('password')"
+            @blur="handleBlur"
             name="密码"
             placeholder="请输入密码"
             :rules="[{ required: true, message: '请填写密码' }]"
@@ -163,6 +178,10 @@ const usernameEndValidate = ({ status, message }) => {
     --van-button-default-height: 48px;
     --van-field-placeholder-text-color: #8f959e;
 
+    .input-focus-primary {
+      border-color: var(--ed-color-primary) !important;
+    }
+
     .van-ed-error {
       font-size: 14px;
       font-weight: 400;