手机端UI-长篇大论之-我的

hhh.

导航：

• 预览篇-   手机端UI-长篇大论之-预览
• 主页篇-   手机端UI-长篇大论之-主页
• 区域篇-   手机端UI-长篇大论之-区域
• 我的篇-   手机端UI-长篇大论之-我的
• 万年历-   万年历流程+卡片
  

前言：

说明：

• 一般问题，请善用论坛和网页搜索，里面有答案。
• 也可以借助AI工具，可以很方便的解决问题。如：深度求索，通义千问，GhatGPT。
  

页面结构：

• 页面主要有上，中，下三个部分，通俗理解就是：页眉→内容→页脚（dock栏）。
• 其中上和下这两个部分的卡片，分别固定在屏幕的页眉和页脚。
• 其中内容部分由：人员信息卡片→高级跳转卡片组成。
  

前期准备：

添加群组：

• 添加方式：设备与服务→辅助元素→创建辅助元素→群组：为实体添加群组。
• 主要添加各种类型“传感器电池组”，比如：门窗传感器电池组。
  

添加页面：

• 因页面跳转需要，需要添加最少1个页面，可见性设置为“不可见”或者“子视图”。
• 分别为：耗材等，视个人情况而定。
  

那请泡好茶，我们开始卡片的添加

---

重要：

• 在视图配置页面修改主题为：minimalist-mobile，包含手机端UI全部界面。
• 在视图配置页面修改视图类型为：默认类型（部件），包含：主页，区域，我的。
  

卡片添加：     

• 使用手动模式添加卡片，支持可视化编辑器。
• 请按照：页眉→人员信息卡片→高级跳转卡片→dock栏。这个顺序依次添加卡片。
• 文件按照数字顺序命名，按照顺序添加即可。
  

需要修改：

• 我的篇，主要是页面跳转。
• 人员信息卡片使用的是“条件卡片”，那个用户登录，就显示那个用户信息，支持可视化编辑器。
• 耗材卡片，支持可视化编辑器，替换电池组“实体ID”即可。
• 需要修改这个颜色中的页面地址，/dashboard-cellphone/haocai 这个地址就是添加好的页面地址栏。
  

type: vertical-stack
title: 高级
cards:
  - type: custom:mushroom-template-card
    primary: 设备耗材
    secondary: 跟踪耗材状态
    icon: mdi:database
    icon_color: orange
    tap_action:
      action: navigate
      navigation_path: /dashboard-cellphone/haocai
    hold_action:
      action: none
    double_tap_action:
      action: none
  - type: custom:mushroom-template-card
    primary: 设备管理
    secondary: 查看、管理设备状态
    icon: mdi:server
    icon_color: blue
    tap_action:
      action: navigate
      navigation_path: ''
    hold_action:
      action: none
    double_tap_action:
      action: none
  - type: custom:mushroom-template-card
    primary: 用户
    secondary: 查看、管理当前登入用户
    icon: mdi:account-outline
    icon_color: red
    tap_action:
      action: navigate
      navigation_path: /config/person
    hold_action:
      action: none
    double_tap_action:
      action: none
  - type: custom:mushroom-template-card
    primary: 设置
    secondary: 更多设置
    icon: mdi:cog
    icon_color: cyan
    tap_action:
      action: navigate
      navigation_path: /config/dashboard
    hold_action:
      action: none
    double_tap_action:
      action: none



其他：

• 高级区域部分，主要是跳转到原生的设置界面，耗材部分主要是分组显示，优先显示最小电量的设备。
• 请把图片文件夹添加到www文件夹下。
  

遇到问题，或者有新颖的想法，请说明。谢谢！

polisher

感谢分享，图标挺漂亮。

baochenlin

感谢分享，收藏

龙魂炎虎

谢谢，很有启发

vanscer

感谢分享，赞起来

lovesf

感谢分享，学习中

ayuan2167

感谢分享，学习中

yujie000

看看怎么做

YY0594

感谢分享，学习中

guxingtianya

想知道这个适配手机端UI，也适配电脑端UI把