Merge pull request #8231 from dataease/pr@dev-v2_dzz_mobile

feat(移动端): 页面样式优化
2024-02-28 18:30:32 +08:00 · 2024-02-28 18:30:32 +08:00 · a35b61d070
commit a35b61d070
parent b90fcfcb7c 778193099b
13 changed files with 310 additions and 47 deletions
--- a/core/core-frontend/src/assets/svg/mobile/icon_dashboard_filled.svg
+++ b/core/core-frontend/src/assets/svg/mobile/icon_dashboard_filled.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 8C16.2239 8 16 8.22386 16 8.5V20H14.5V2.5C14.5 2.22386 14.2761 2 14 2H10C9.72386 2 9.5 2.22386 9.5 2.5V20H8V11.5C8 11.2239 7.77614 11 7.5 11H3.5C3.22386 11 3 11.2239 3 11.5V20H1.5C1.22386 20 1 20.2239 1 20.5V21.5C1 21.7761 1.22386 22 1.5 22H22.5C22.7761 22 23 21.7761 23 21.5V20.5C23 20.2239 22.7761 20 22.5 20H21V8.5C21 8.22386 20.7761 8 20.5 8H16.5Z" fill="#3370FF"/>
+</svg>
--- a/core/core-frontend/src/assets/svg/mobile/icon_dashboard_outlined.svg
+++ b/core/core-frontend/src/assets/svg/mobile/icon_dashboard_outlined.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.50005 20V11.5455C2.50005 10.9681 2.97975 10.5 3.57148 10.5H8.00005V3.05263C8.00005 2.47128 8.51173 2 9.14291 2H14.8572C15.4884 2 16.0001 2.47128 16.0001 3.05263V8H20.4286C21.0204 8 21.5001 8.44772 21.5001 9V20H22.4999C22.776 20 22.9999 20.2239 22.9999 20.5V21.5C22.9999 21.7761 22.776 22 22.4999 22H1.49988C1.22374 22 0.999878 21.7761 0.999878 21.5V20.5C0.999878 20.2239 1.22374 20 1.49988 20H2.50005ZM19.5001 20V10H16.0001V20H19.5001ZM14.0001 20V4H10.0001V20H14.0001ZM8.00005 20V12.5H4.50005V20H8.00005Z"/>
+</svg>
--- a/core/core-frontend/src/assets/svg/mobile/icon_home_filled.svg
+++ b/core/core-frontend/src/assets/svg/mobile/icon_home_filled.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4233 2.68303C11.769 2.43899 12.231 2.43899 12.5767 2.68303L21.0767 8.68303C21.3421 8.87041 21.5 9.17508 21.5 9.5V20.5C21.5 21.0523 21.0523 21.5 20.5 21.5H14V16.5C14 15.3954 13.1046 14.5 12 14.5C10.8954 14.5 10 15.3954 10 16.5V21.5H3.5C2.94772 21.5 2.5 21.0523 2.5 20.5V9.5C2.5 9.17508 2.65786 8.87041 2.92332 8.68303L11.4233 2.68303Z" fill="#3370FF"/>
+</svg>
--- a/core/core-frontend/src/assets/svg/mobile/icon_home_outlined.svg
+++ b/core/core-frontend/src/assets/svg/mobile/icon_home_outlined.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4233 2.68303C11.769 2.43899 12.231 2.43899 12.5767 2.68303L21.0767 8.68303C21.3421 8.87041 21.5 9.17508 21.5 9.5V20.5C21.5 21.0523 21.0523 21.5 20.5 21.5H13V15.5C13 14.9477 12.5523 14.5 12 14.5C11.4477 14.5 11 14.9477 11 15.5V21.5H3.5C2.94772 21.5 2.5 21.0523 2.5 20.5V9.5C2.5 9.17508 2.65786 8.87041 2.92332 8.68303L11.4233 2.68303ZM15 19.5H19.5V10.0181L12 4.724L4.5 10.0181V19.5H9V15.5C9 13.8431 10.3431 12.5 12 12.5C13.6569 12.5 15 13.8431 15 15.5V19.5Z"/>
+</svg>
--- a/core/core-frontend/src/assets/svg/mobile/icon_member_filled.svg
+++ b/core/core-frontend/src/assets/svg/mobile/icon_member_filled.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 13H9C6.23858 13 3 14.9315 3 18.4V21.1C3 21.5971 3.44772 22 4 22H20C20.5523 22 21 21.5971 21 21.1V18.4C21 14.9286 17.7614 13 15 13Z" fill="#3370FF"/>
+<path d="M7 7C7 9.76142 9.23858 12 12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7Z" fill="#3370FF"/>
+</svg>
--- a/core/core-frontend/src/assets/svg/mobile/icon_member_outlined.svg
+++ b/core/core-frontend/src/assets/svg/mobile/icon_member_outlined.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 13H15C17.7614 13 21 14.9286 21 18.4V21.1C21 21.5971 20.5523 22 20 22H4C3.44772 22 3 21.5971 3 21.1V18.4C3 14.9315 6.23858 13 9 13ZM19 20V18.3333C19 16.2318 16.871 15 15 15H9C7.16997 15 5 16.1717 5 18.3333V20H19ZM12 12C9.23858 12 7 9.76142 7 7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7C17 9.76142 14.7614 12 12 12ZM12 10C13.6569 10 15 8.65685 15 7C15 5.34315 13.6569 4 12 4C10.3431 4 9 5.34315 9 7C9 8.65685 10.3431 10 12 10Z" />
+</svg>
--- a/core/core-frontend/src/views/mobile/components/DashboardCell.vue
+++ b/core/core-frontend/src/views/mobile/components/DashboardCell.vue
@ -0,0 +1,94 @@
+<script lang="ts" setup>
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  prefixIcon: {
+    type: String,
+    default: ''
+  },
+  nextlevel: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emits = defineEmits(['click'])
+const handleClick = () => {
+  emits('click')
+}
+</script>
+
+<template>
+  <div class="dashboard-cell" @click="handleClick">
+    <div class="label">
+      <el-icon>
+        <Icon :name="prefixIcon"></Icon>
+      </el-icon>
+      <span class="text ellipsis">
+        {{ label }}
+      </span>
+    </div>
+    <div class="switch" v-if="nextlevel">
+      <el-icon>
+        <Icon name="icon_right_outlined"></Icon>
+      </el-icon>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.dashboard-cell {
+  width: 100%;
+  height: 48px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  background: #fff;
+  &::after {
+    content: '';
+    background: #e4e5e7;
+    height: 1px;
+    width: calc(100% - 62px);
+    transform: scaleY(0.5);
+    position: absolute;
+    left: 46px;
+    bottom: 0;
+  }
+
+  .label {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    display: flex;
+    max-width: calc(100% - 32px);
+    align-items: center;
+
+    .text {
+      width: 100%;
+    }
+    .ed-icon {
+      font-size: 22px;
+      margin-right: 8px;
+    }
+  }
+
+  .switch {
+    display: flex;
+    align-items: center;
+    color: #8f959e;
+    .ed-icon {
+      font-size: 16px;
+    }
+  }
+
+  &:nth-child(1) {
+    &::after {
+      display: none;
+    }
+  }
+}
+</style>
--- a/core/core-frontend/src/views/mobile/components/OrgCell.vue
+++ b/core/core-frontend/src/views/mobile/components/OrgCell.vue
@ -38,7 +38,9 @@ const handleRightClick = () => {
      <el-icon v-if="!!prefixIcon">
        <Icon :name="prefixIcon"></Icon>
      </el-icon>
-      {{ label }}
+      <span class="text ellipsis">
+        {{ label }}
+      </span>
    </div>
    <div class="switch" v-if="nextlevel">
      <div class="tips">
@ -79,7 +81,12 @@ const handleRightClick = () => {
    font-weight: 400;
    line-height: 22px;
    display: flex;
+    max-width: calc(100% - 32px);
    align-items: center;
+
+    .text {
+      width: 100%;
+    }
    &.active {
      color: var(--ed-color-primary);
    }
--- a/core/core-frontend/src/views/mobile/components/Workbranch.vue
+++ b/core/core-frontend/src/views/mobile/components/Workbranch.vue
@ -0,0 +1,84 @@
+<script lang="ts" setup>
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  time: {
+    type: String,
+    default: ''
+  }
+})
+
+const emits = defineEmits(['click'])
+const handleClick = () => {
+  emits('click')
+}
+</script>
+
+<template>
+  <div class="workbranch-cell" @click="handleClick">
+    <el-icon>
+      <Icon name="icon_dashboard"></Icon>
+    </el-icon>
+    <div class="label">
+      <div class="text ellipsis">
+        {{ label }}
+      </div>
+      <div class="time">
+        {{ time }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.workbranch-cell {
+  width: 100%;
+  height: 68px;
+  position: relative;
+  display: flex;
+  padding: 12px 16px;
+  background: #fff;
+  &::after {
+    content: '';
+    background: #e4e5e7;
+    height: 1px;
+    width: calc(100% - 62px);
+    transform: scaleY(0.5);
+    position: absolute;
+    left: 46px;
+    bottom: 0;
+  }
+
+  .ed-icon {
+    font-size: 22px;
+    margin-right: 8px;
+  }
+
+  .label {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    max-width: calc(100% - 54px);
+
+    .text {
+      width: 100%;
+    }
+
+    .time {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #8f959e;
+      margin-top: 2px;
+    }
+  }
+
+  &:nth-child(1) {
+    &::after {
+      display: none;
+    }
+  }
+}
+</style>
--- a/core/core-frontend/src/views/mobile/directory/index.vue
+++ b/core/core-frontend/src/views/mobile/directory/index.vue
@ -4,18 +4,12 @@ import { storeToRefs } from 'pinia'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { BusiTreeRequest } from '@/models/tree/TreeNode'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
+import DashboardCell from '@/views/mobile/components/DashboardCell.vue'
 import { useRouter } from 'vue-router'
-import VanCell from 'vant/es/cell'
 import VanSticky from 'vant/es/sticky'
-import VanSearch from 'vant/es/search'
-import VanCellGroup from 'vant/es/cell-group'
 import VanNavBar from 'vant/es/nav-bar'
-import 'vant/es/cell/style'
-import 'vant/es/cell-group/style'
 import 'vant/es/nav-bar/style'
 import 'vant/es/sticky/style'
-import 'vant/es/search/style'
-const keywords = ref()
 const anyManage = ref(false)
 const rootManage = ref(false)
 const tableData = ref([])
@ -97,34 +91,36 @@ onMounted(() => {
 </script>

 <template>
-  <div>
+  <div class="mobile-dashboard">
    <van-sticky>
-      <van-search
-        v-if="!directName.length"
-        v-model="keywords"
-        shape="round"
-        placeholder="请输入仪表板名称"
-      />
      <van-nav-bar
-        v-else
-        :title="activeDirectName"
-        left-text="返回"
-        left-arrow
+        safe-area-inset-top
+        :title="activeDirectName || '仪表板'"
+        :left-arrow="!!activeDirectName"
        @click-left="onClickLeft"
      />
    </van-sticky>
-    <van-cell-group style="overflow-y: auto; height: calc(100vh - 104px)">
-      <van-cell
+    <div class="dashboard-cell-group">
+      <DashboardCell
        v-for="ele in activeTableData"
        :key="ele.id"
-        size="large"
        @click="dataClick(ele)"
-        :title="ele.name"
-        :is-link="!ele.leaf"
-        :icon="ele.leaf ? 'bar-chart-o' : 'list-switch'"
+        :label="ele.name"
+        :nextlevel="!ele.leaf"
+        :prefix-icon="ele.leaf ? 'icon_dashboard' : 'dv-folder'"
      />
-    </van-cell-group>
+    </div>
  </div>
 </template>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.mobile-dashboard {
+  background: #f5f6f7;
+
+  .dashboard-cell-group {
+    overflow-y: auto;
+    height: calc(100vh - 102px);
+    margin-top: 8px;
+  }
+}
+</style>
--- a/core/core-frontend/src/views/mobile/home/index.vue
+++ b/core/core-frontend/src/views/mobile/home/index.vue
@ -4,17 +4,16 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { useI18n } from '@/hooks/web/useI18n'
 import { shortcutOption } from '@/views/workbranch/ShortcutOption'
 import { useRouter } from 'vue-router'
+import Workbranch from '@/views/mobile/components/Workbranch.vue'
 import request from '@/config/axios'
 import VanTabs from 'vant/es/tabs'
+import VanNavBar from 'vant/es/nav-bar'
 import VanTab from 'vant/es/tab'
-import VanCell from 'vant/es/cell'
 import VanSticky from 'vant/es/sticky'
-import VanCellGroup from 'vant/es/cell-group'
 import 'vant/es/sticky/style'
 import 'vant/es/tab/style'
+import 'vant/es/nav-bar/style'
 import 'vant/es/tabs/style'
-import 'vant/es/cell/style'
-import 'vant/es/cell-group/style'

 const router = useRouter()
 const { t } = useI18n()
@ -113,6 +112,7 @@ const formatterTime = val => {
 <template>
  <div class="mobile-panel-list">
    <van-sticky>
+      <van-nav-bar safe-area-inset-top title="工作台" />
      <van-tabs @click-tab="handleClick" v-model:active="activeTab">
        <van-tab
          v-for="item in tablePaneList"
@ -123,16 +123,27 @@ const formatterTime = val => {
        ></van-tab>
      </van-tabs>
    </van-sticky>
-    <van-cell-group style="overflow-y: auto; height: calc(100vh - 94px)">
-      <van-cell
+    <div class="workbranch-cell-group">
+      <Workbranch
        @click="handleCellClick(ele)"
        v-for="ele in state.tableData"
        :key="ele.id"
        size="large"
-        :title="ele.name"
-        :value="formatterTime(ele.lastEditTime || ele.time)"
-        icon="bar-chart-o"
+        :label="ele.name"
+        :time="formatterTime(ele.lastEditTime || ele.time)"
      />
-    </van-cell-group>
+    </div>
  </div>
 </template>
+
+<style lang="less" scoped>
+.mobile-panel-list {
+  background: #f5f6f7;
+
+  .workbranch-cell-group {
+    overflow-y: auto;
+    height: calc(100vh - 142px);
+    margin-top: 8px;
+  }
+}
+</style>
--- a/core/core-frontend/src/views/mobile/index.vue
+++ b/core/core-frontend/src/views/mobile/index.vue
@ -27,9 +27,32 @@ const hiddenTabbar = ref(false)
    ></Directory>
    <Personal v-else-if="activeTabbar === 'user'"> </Personal>
    <van-tabbar safe-area-inset-bottom v-if="!hiddenTabbar" v-model="activeTabbar">
-      <van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
-      <van-tabbar-item name="direct" icon="bars">目录</van-tabbar-item>
-      <van-tabbar-item name="user" icon="user-o">我的</van-tabbar-item>
+      <van-tabbar-item name="home">
+        <template #icon="{ active }">
+          <el-icon>
+            <Icon :name="active ? 'mobile-icon_home_filled' : 'mobile-icon_home_outlined'"></Icon>
+          </el-icon>
+        </template>
+        工作台
+      </van-tabbar-item>
+      <van-tabbar-item name="direct"
+        ><template #icon="{ active }">
+          <el-icon>
+            <Icon
+              :name="active ? 'mobile-icon_dashboard_filled' : 'mobile-icon_dashboard_outlined'"
+            ></Icon>
+          </el-icon> </template
+        >仪表板</van-tabbar-item
+      >
+      <van-tabbar-item name="user"
+        ><template #icon="{ active }">
+          <el-icon>
+            <Icon
+              :name="active ? 'mobile-icon_member_filled' : 'mobile-icon_member_outlined'"
+            ></Icon>
+          </el-icon> </template
+        >我的</van-tabbar-item
+      >
    </van-tabbar>
    <van-overlay v-model:show="showLoading">
      <div style="display: flex; align-items: center; justify-content: center; height: 100%">
@ -44,10 +67,43 @@ const hiddenTabbar = ref(false)
  width: 100vw;
  height: 100vh;
  overflow: hidden;
-
+  --van-nav-bar-height: 44px;
+  --van-nav-bar-arrow-size: 20px;
+  --van-nav-bar-icon-color: #1f2329;
+  --van-nav-bar-title-text-color: #1f2329;
+  --van-font-bold: 500;
+  --van-nav-bar-title-font-size: 17px;
+  --van-tabs-line-height: 40px;
+  --van-tabs-bottom-bar-width: 56px;
+  --van-tabs-bottom-bar-color: var(--ed-color-primary);
+  --van-tab-active-text-color: var(--ed-color-primary);
+  --van-border-width: 0;
+  --van-tab-text-color: #646a73;
+  --van-tabbar-item-text-color: #8f959e;
  .van-hairline--top-bottom:after {
    bottom: auto;
    top: auto;
  }
+
+  .van-tabbar-item {
+    .ed-icon {
+      font-size: 22px !important;
+    }
+    .van-tabbar-item__text {
+      color: #646a73;
+      font-size: 10px;
+      font-weight: 400;
+      line-height: 10px;
+    }
+
+    &.van-tabbar-item--active {
+      .van-tabbar-item__text {
+        color: var(--ed-color-primary);
+        font-size: 10px;
+        font-weight: 400;
+        line-height: 10px;
+      }
+    }
+  }
 }
 </style>
--- a/core/core-frontend/src/views/mobile/personal/index.vue
+++ b/core/core-frontend/src/views/mobile/personal/index.vue
@ -148,6 +148,7 @@ const activeTableData = computed(() => {
        :key="ele.id"
        :label="ele.name"
        :nextlevel="ele.children"
+        :active="name === ele.name"
      ></OrgCell>
    </template>
  </div>
@ -158,12 +159,7 @@ const activeTableData = computed(() => {
  height: 100vh;
  width: 100vw;
  background: #f5f6f7;
-  --van-nav-bar-height: 44px;
-  --van-nav-bar-arrow-size: 20px;
-  --van-nav-bar-icon-color: #1f2329;
-  --van-nav-bar-title-text-color: #1f2329;
-  --van-font-bold: 500;
-  --van-nav-bar-title-font-size: 17px;
+
  .mobile-user-top {
    padding: 16px;
    display: flex;