XTC_WingMenu

翼形菜单

术语约定

  • 门户(Portal)

翼形菜单的第一级目录是以竖直的条图呈现,这一节目录称之为门户。

  • 导览式页面(Navigation)

门户展开后的面板中,显示文件夹结构的二级菜单,当二级菜单激活后,再显示此二级菜单包含的内容列表。

  • 过滤式页面(Filter)

门户展开后的面板中,显示门户的所有内容列表,使用过滤菜单显示内容的子集。

配置说明

<?xml version="1.0" encoding="utf-8"?>
<MyConfig version="1.0">
  <!-- UI 
      visible: 预加载完成后是否显示
      slot: ui根节点在主Canvas中的挂载路径
    -->
  <UI visible="true" slot="[root]"/>
  <!-- World
      visible: 预加载完成后是否显示
      slot: world根节点的挂载路径
    -->
  <World visible="true" slot="[root]"/>
  <!-- 远程过程调用
      address: 地址
    -->
  <GRPC address="https://localhost:19000"/>
  <!-- 样式列表
      name: 名称
      MiddlePanel: 中间展开形状的菜单的面板
      MiddlePanel.color: 面板颜色
      MiddlePanel.decal: 面板的贴花的图片
      EdgePanel: 两边展开形状的菜单的面板
      MiddlePanel.color: 面板颜色
      BundleCell: 资源包单元
      ContentCell: 资源内容单元
      EntryCell: 资源可执行入口
      Filter: 过滤栏
      Navigation.fontColor: 导览栏
      ContentDetail.Title: 内容详情的主标题
      ContentDetail.Label: 内容详情的标签
      ContentDetail.Caption: 内容详情的副标签
      ContentDetail.Topic: 内容详情的标语
      ContentDetail.Description: 内容详情的简介
      Entry.icon: 资源入口的图片
      Entry.text: 资源入口的文字
      Entry.kvKey: 资源入口的在meta中kvS的键,仅当对应的键在kvS中有值时,资源入口才会显示
      Entry.SubjectS: 资源入口被点击后发布的主题列表
    -->
  <Styles>
    <Style name="default">
      <MiddlePanel color="#FFFFFF77" decal="middlepanel-decal.png"/>
      <EdgePanel color="#FFFFFF77"/>
      <BundleCell fontSize="16" fontColor="#FFFFFFFF"/>
      <ContentCell fontSize="16" fontColor="#FFFFFFFF"/>
      <EntryCell fontSize="16" fontColor="#FFFFFFFF"/>
      <Filter fontSize="18" fontColor="#FFFFFFFF"/>
      <Navigation fontSize="18" fontColor="#FFFFFFFF"/>
      <ContentDetail>
        <Title fontSize="32" fontColor="#FFFFFFFF"/>
        <Label fontSize="18" fontColor="#FFC31EFF"/>
        <Caption fontSize="18" fontColor="#39EBFFFF"/>
        <Topic fontSize="24" fontColor="#FFFFFFFF"/>
        <Description fontSize="18" fontColor="#FFFFFFFF"/>
      </ContentDetail>
      <EntryS>
        <Entry icon="entry-image-64.png" text="图片" kvKey="">
          <SubjectS>
            <Subject message="/XTC/WingMenu/Open">
              <Parameters>
                <Parameter key="uid" value="default" type="string"/>
                <Parameter key="source" value="" type="string"/>
                <Parameter key="uri" value="" type="string"/>
                <Parameter key="delay" value="0" type="float"/>
              </Parameters>
            </Subject>
          </SubjectS>
        </Entry>
        <Entry icon="entry-video-64.png" text="视频" kvKey="Res.Video">
          <SubjectS>
            <Subject message="/XTC/VideoSee/Open">
              <Parameters>
                <Parameter key="uid" value="default" type="string"/>
                <Parameter key="source" value="assloud://" type="string"/>
                <Parameter key="uri" value="{{resource_uri}}" type="string"/>
                <Parameter key="delay" value="1" type="float"/>
              </Parameters>
            </Subject>
          </SubjectS>
        </Entry>
        <Entry icon="entry-app-64.png" text="微应用" kvKey="Res.Application">
          <SubjectS>
            <Subject message="/XTC/LuaEnv/Open">
              <Parameters>
                <Parameter key="uid" value="default" type="string"/>
                <Parameter key="source" value="assloud://" type="string"/>
                <Parameter key="uri" value="{{resource_uri}}" type="string"/>
                <Parameter key="delay" value="1" type="float"/>
              </Parameters>
            </Subject>
          </SubjectS>
        </Entry>
        <Entry icon="entry-model-64.png" text="模型" kvKey="">
          <SubjectS>
            <Subject message="/XTC/WingMenu/Open">
              <Parameters>
                <Parameter key="uid" value="default" type="string"/>
                <Parameter key="source" value="" type="string"/>
                <Parameter key="uri" value="" type="string"/>
                <Parameter key="delay" value="0" type="float"/>
              </Parameters>
            </Subject>
          </SubjectS>
        </Entry>
      </EntryS>
    </Style>
  </Styles>
  <!-- 预创建的实例列表
      uid: 实例的唯一ID
      style: 使用的样式名
      uiRoot: UI挂载的根节点(需可见),空值时等于UI.slot
      uiSlot: UI在uiRoot下的挂载路径
      worldRoot: World挂载的根节点(需可见),空值时等于World.slot
      worldSlot: World在worldRoot下的路径
    -->
  <Instances>
    <Instance uid="default" style="default" uiRoot="" uiSlot="" worldRoot="" worldSlot=""/>
  </Instances>
  <!-- 预加载 -->
  <Preload>
    <!-- 消息订阅的主题
          message: 消息
          Parameter.key: 参数的键
          Parameter.value: 参数的值
          Parameter.type: 参数的类型,支持的类型为string,int,float,bool
        -->
    <Subjects>
      <Subject message="/XTC/WingMenu/Open">
        <Parameters>
          <Parameter key="uid" value="default" type="string"/>
          <Parameter key="source" value="" type="string"/>
          <Parameter key="uri" value="" type="string"/>
          <Parameter key="delay" value="0" type="float"/>
        </Parameters>
      </Subject>
    </Subjects>
  </Preload>
</MyConfig>

配置门户

菜单结构需要在catalog.json中进行配置。

在catalog.json中的sectionS数组中,添加以下内容

{
  "name": "测试1",
  "path": "/Test1",
  "instanceS": [
    "default"
  ],
  "contentS": [
  ],
  "kvS": {
    "shape": "edge",
    "banner": "banner-1.png",
    "pagination":"navigation",
    "cover": "cover-1.png",
  }
}

name指定此门户的显示名称

path指定此门户的路径

kvS中的shape指定了该门户的形状,可选值为(middle, edge),middle形状的门户打开时从中间展开,edge形状的门户打开时从两边展开。

kvS中的banner指定了该门户的条形图,该路径相对于themes目录中的模块名目录。

kvS中的pagination指定了该门户的页呈现形式,可选值为(navigation, filter)。navigation形式的页面,会打开二级菜单后打开内容列表,并在内容列表下方显示返回到二级菜单的按钮。而filter形式的页面,会显示所有的内容列表,内容列表下方的过滤栏用于过滤内容子集,

kvS.cover字段可配置门户展开时显示的封面图(600x600),该路径相对于themes目录中的模块名目录,仅edge形状的门户有效

配置导览式页面

在catalog.json中的sectionS数组中,添加以下内容

{
  "name": "1",
  "path": "/Test1/1",
  "instanceS": [
    "default"
  ],
  "contentS": [
      "2f0b906f-1861-4c49-a687-1784a14953c5/+",
      "b359b77a-fb45-4845-8455-27f57ddaeed8/1dfbca4d-3376-4076-ab57-fde7020330f1"
  ],
  "kvS": {
    "icon.source": "theme://",
    "icon.uri": "icon-1.png",
    "cover": "cover-1-1.png"
  }
}

导览式页面,一个section定义了一个导览菜单。

name指定此菜单的显示名称

path指定此菜单的路径,注意,路径中需要包含对应的门户的路径,例如/Test1/1表示在门户/Test1中的导览菜单1。

contentS指定菜单包含的内容列表

kvS中的icon.source指定此菜单的图片的来源,可选值为(assloud://, theme://),assould://表示图片位于assets文件夹下,theme://表示图片位于themes文件夹下。

kvS中的icon.uri指定此菜单的图片在来源中的相对路径

kvS.cover字段可配置菜单打开时显示的封面图(600x600),该路径相对于themes目录中的模块名目录,仅配置为edge和navigation的门户有效

导览式页面需要确保对应的门户的ksS.pagination的值是navigation

配置过滤式页面

在catalog.json中的sectionS数组中,添加以下内容

{
      "name": "4",
      "path": "/Test2/4",
      "instanceS": [
        "default"
      ],
      "contentS": [
          "b359b77a-fb45-4845-8455-27f57ddaeed8/+"
      ],
      "kvS": {
      }
    },

导览式页面,一个section定义了一个过滤菜单。 name指定此菜单的显示名称 path指定此菜单的路径,注意,路径中需要包含对应的门户的路径,例如/Test2/4表示在门户/Test2中的过滤菜单4。 contentS指定菜单包含的内容列表

过滤式页面需要确保对应的门户的ksS.pagination的值是filter

消息订阅

依赖插件

更新日志

0.2.0 (2023/8/11)

  • 支持配置右面版封面

Last updated