[讨论]卡片模式下标签的排版布局

[aijwfsibari]

问题背景

我在主题设置里面，启用了 [标签单独一行显示]，然后发现，卡片高度不统一了，如图：

期望的解决方案

建议统一卡片高度。

并且，其实不需要再在左边 竖着 显示 “标签” 两个字了，一堆标签展示出来，一目了然就是标签展示区了，而且，不启用【标签单独一行显示】只在 hover 时显示，也没有标签两个字，所以觉得没必要。

如果去掉 左边 竖着 显示 “标签” 两个字以后，建议直接使用左对齐即可，更符合我们读取信息的习惯，这也是原 hover 时显示的时候，同样的左对齐方式，仅仅是在下方显示出来而已。

另外一个小建议是：启用了 [标签单独一行显示] 以后，剩余天数标签 和 价格标签 排在 众多标签末尾了。
可以前置在开头，其他标签可以另起一行然后按照原顺序分别展示，这样格式会更加统一，不过不改也行。现在这样也能看了

功能类型

界面展示

影响范围

节点卡片 (NodeCard)

备选方案

No response

配置建议

No response

参考示例

卡片同一高度以后，标签少的服务器卡片底部，没有内容，就保留空白即可，比如：

其他信息

No response

[lyimoexiao]

左边 竖着 显示 “标签” 两个字

此为标签容器在标签过多时导致文字容器宽度被压缩进而导致的文字自动换行

关于设计问题：

1. 主题设计方向最开始就为简洁方向进行设计开发，尽可能的减少了大量的信息集中展示，所以并没有考虑在超多标签下的显示问题

2. 如果固定卡片高度，当内容较少时：会导致视觉留白，整体会不太协调；当内容超过容器固定高度时，会导致标签溢出卡片使得显示异常

剩余天数标签 和 价格标签 排在 众多标签末尾了。

这个主要是数据重心考量所做出来的排序，举个例子：如果我需要找到某个大流量的节点，去考虑我下个月需不需要使用它。那我首先要阅读标签信息，确认是否是我需要找的那一台大流量的节点、然后再去了解其的具体价格和剩余天数，考虑是否需要继续使用。

另外，一般访客首先想要了解的是这个机器的特性，所以必然先会从你的标签去了解这个机器的特性有哪些呀，再去了解价格来考量性价比什么的。同时还可以结合您的剩余天数判断您富不富。

所以，目前建议若信息量较大且标签数较多时使用 List 视图。

如果有啥好主意可以前往讨论区进行哈

[aijwfsibari]

其实每个人换主题都是为了美观，既然为了美观肯定也会考虑标签过多的问题，其实自然不会针对单个服务器配置超多标签，但有可能相差一两个字，就会导致某张服务器卡片的多一行，仅仅是一行之差就会影响整体的整齐度，所以才提出这样的建议，说到底，其实仅仅是调整一行标签高度对应的卡片高度而已。

而且我提的建议其实不是固定卡片高度呢，而是根据某一行中，标签所占据卡片高度最多（可能占了三行，其他两行）的服务器卡片 (那么卡片在其所在行中的高度肯定是最高的)，对应生成的高度，再把高度统一到同一行的其他服务器卡片。这样肯定不会导致“标签溢出卡片”，因为其他服务器标签才占据两行，卡片肯定不会溢出。

而至于内容较少的会留白这个问题，还是上面所说的，其实可能只是多一行和少一行标签高度的差别而已，差别太大影响美观的话，自然也会自行调整的，在不差太多的情况下，在底部留白其实还好：

个人感觉比卡片高度不统一的留白好：

所以其实说到底，比较大的概率都是相差一行左右的情况罢了

对了，差点忘了说，List 视图好像没有显示标签

[lyimoexiao]

而是根据某一行中，标签所占据卡片高度最多（可能占了三行，其他两行）的服务器卡片 (那么卡片在其所在行中的高度肯定是最高的)，对应生成的高度，再把高度统一到同一行的其他服务器卡片。

这个后期我可以试着去实现下看看，或者也有可能会调整为动态布局，毕竟前端关于 Grid 的布局调整这一块还是有点一言难尽的。。。

而至于内容较少的会留白这个问题，还是上面所说的，其实可能只是多一行和少一行标签高度的差别而已，差别太大影响美观的话，自然也会自行调整的，在不差太多的情况下，在底部留白其实还好

留白这一部分看个人喜好吧，我认识的几位同学其实是更不希望卡片有留白的，所以当初并没有考虑做留白的设计。或许我后面可以考虑改变为动态 Gap 统一化下？

List 视图好像没有显示标签

有的有的，但是忘记写到主题默认配置了（）

调整显示列配置为

["status","region","name","uptime","tags","os","cpu","mem","disk","traffic"]

调整列宽度配置为

{"status":"76px","region":"32px","name":"minmax(200px, 1fr)","uptime":"minmax(100px, 0.6fr)","tags":"minmax(220px, 1fr)","os":"120px","cpu":"180px","mem":"180px","disk":"180px","traffic":"180px"}

[aijwfsibari]

其实默认配置状态下，视觉上应该是没有变化的，因为默认配置状态下，标签是 hover 时显示的，这是我试了众多主题以后，觉得这个设计是最棒的，刚好符合 “不希望卡片有留白” 的同学。因为所有元素里面，除了标签是不可控的以外，其他元素基本是可控的。

所以我以上提出的建议，仅仅是在 启用了 [标签单独一行显示] 的情况下的哈。

再次感谢告知 List 视图的配置，我先用着 List 视图了。没有想到 List 视图的宽度也可以自行调节，这个人性化设计也是太棒了

感谢大佬的主题