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

hhh. · 发表于 2024-7-15 18:32:24

本帖最后由 hhh. 于 2024-11-14 00:33 编辑

导航：

前言：

说明：

一般问题，请善用论坛和网页搜索，里面有答案。
也可以借助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

其他：