时间部件-Time

Time-1 自由选择时间区间

  • 默认时间:选择当前日期 00:00:00~23:59:59,格式:2022-02-02 00:00:00 至 2022-02-02 23:59:59。
  • 点击展开时间选择面板,可快速选择:今天、昨天、最近一周(不含今天)、最近一个月(不含今天)、最近三个月(不含今天),可从日历中选择两个日期区间。默认开始、结束时分秒依然分别是:00:00:00、23:59:59。 点击确定完成时间选择。
  • 小时、分钟、秒可修改。
  • 日历中,默认显示当前月份、下一月份,可通过<<、>>切换年份,通过<、>切换月份。
  • 已选择时间的情况下,再次打开时间面板,已选择的时间保持不变。日历中显示已选择起始月份、起始月份+1月份(如原本选择了22年5月1日至22年7月8日,再次打开面板时,看到的月份是5月、6月)。
  • “清空”功能:收起时间选择面板,时间还原到默认时间。

Time-2 自由选择日期区间

  • 在Time-1基础上去掉了小时、分钟、秒的选择、展示。
  • 默认日期:当前日期。

Time-3 自由选择月份区间

  • 默认月份:当前月份
  • 点击展开月份选择面板,展示今年、明年两个相邻年份的所有月份。左右两个月份日历代表查询的起始月份、结束月份。通过<<、>>可切换年份,点击两个月份之后完成选择(收起面板)。
    可快速选择本月、今年至今(即今年1月到当前月份)、最近六个月(不包含当前月份)。

Game_select 游戏选择部件

游戏选择部件

  • 输入游戏gid或游戏名关键字,输入过程中,即时检索游戏表中数据(包括H5游戏、客户端游戏),展示匹配的游戏下拉列表,从中点击完成游戏选择。
  • 下拉列表游戏展示格式:gid、游戏名、系统类型(Android、iOS、H5)。

Game_multi_select 游戏多选部件

  • 在游戏单选的基础上处理。下拉列表中可进行多选,被选中的以高亮样式显示(如右图)。
  • 下拉列表收起:点击外部任意位置可收起。
  • 已选择状态下,输入框显示样式:第一个选中游戏信息+更多被选中数量的样式显示(如下图)。

用户部件

  • 支持输入mid、username、phone、e_mail任一信息进行检索。
  • 对于纯数字输入的情况下,mid、phone需自动判定其类型然后进行检索。
  • 海外手机号的格式限定:1-2435522352

“商务人员”选择部件

  • 参考游戏选择部件,输入关键字后下拉展示管理员姓名列表,支持多选。
  • 商务人员是管理后台的管理员(表:sy_manage),同时admin_id为:数据库sy_manage_group表中group_id为12、17的名单。

“运营人员”选择部件

  • 参考游戏选择部件,输入关键字后下拉展示管理员姓名列表,支持多选。
  • 运营人员是管理后台的管理员(表:sy_manage),同时admin_id为:数据库sy_manage_group表中group_id为14、19的admin_id。

“运营组”选择部件

  • 提供下拉列表选择(无需输入),支持多选。多选样式同“游戏多选部件。
  • 运营组是表“sy_game_operate_group”中的管理对象。

“厂商”选择部件

  • 参考游戏选择部件,输入关键字后下拉展示厂商名字备选。支持 单选、多选。操作界面样式相同。
  • 厂商是表:sy_developer中的管理对象,但厂商名称信息位于表sy_developer_qual中字段“company_name”。

“管理员”选择部件

  • 输入关键字后下拉展示管理员姓名列表,支持单选。
  • 管理员对应的表:sy_manage。

通用下拉单选、多选部件

  • 在需求中,如果需要用到这样一种条件查询部件:输入关键字or无需输入关键字,在下拉列表中展示匹配的备选结果,从列表中进行单选、多选作为查询条件,则统一借鉴游戏选择部件,分别有单选、多选两种样式。
  • 需要单选还是多选根据产品需求而定。
  • 是否需要输入关键字进行匹配根据产品需求而定。
  • 下拉的选项的数据范围根据产品需求而定。

其他未作预设的部件

  • PUB管理后台使用了 element ui 提供的部件样式,后台页面开发应遵循相关样式规范。
  • element ui:https://element.eleme.cn/#/zh-CN/component/installation
  • 如果遇到更多的常用组件,欢迎提出建议定义一个通用标准,以便于复用。

1、常用部件交互规范

2、后台管理页面布局样式规范

这里定义了后台页面一些常用的预设部件,目的是在程序侧封装成一个通用组件,便于在页面开发时复用。同时在产品需求侧可以直接使用,省去重复描述UI、交互、数据定义等。提高产品、开发在需求上的沟通效率。


产品在需求中,可以直接使用下方定义的名字(加粗斜体部分),开发人员即可理解(开发人员也需预先培训、了解)。

Game_select

Game_multi_select

User 用户选择部件

Admin 管理员选择部件

商务人员选择部件

运营人员选择部件

运营组选择部件

厂商选择部件

通用下拉单选部件、通用下拉多选部件