|
|
@@ -0,0 +1,47 @@
|
|
|
+<template>
|
|
|
+ <div :class="['empty-state', `empty-state-${size}`]">{{ description }}</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ /**
|
|
|
+ * 空态占位:数据为空时的一行居中提示。
|
|
|
+ *
|
|
|
+ * 统一前模块内有 7 处各写一份的同类样式(字号 12/13px、颜色三种灰、内边距 8/16/20px 各不相同),
|
|
|
+ * 这里收敛为两档尺寸:
|
|
|
+ * - md(默认):面板级空态,13px / 次级文字色 / 上下 20px
|
|
|
+ * - sm:列表与弹层内的紧凑空态,12px / 更弱的文字色 / 上下 12px
|
|
|
+ *
|
|
|
+ * 颜色取自 styles/tokens.less 的既有基线值(@color-text-muted=#8b949e、@color-text-dim=#6a7a8a),
|
|
|
+ * 对原来用这两个色的位置是等值替换。
|
|
|
+ *
|
|
|
+ * 不覆盖的几种情况(语义不同,刻意保留各自实现):
|
|
|
+ * - 新对话缺省图(是图片,不是文字空态);
|
|
|
+ * - 预览面板的"不支持此格式"(图标 + 主文案 + 副文案三级结构);
|
|
|
+ * - 子智能体详情里的"继承主 Agent 全部工具"(行内斜体说明,非居中占位);
|
|
|
+ * - 各处已有的 a-empty(用的是组件库现成件,本就统一)。
|
|
|
+ */
|
|
|
+ withDefaults(defineProps<{ description: string; size?: 'md' | 'sm' }>(), { size: 'md' });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ @import '../../styles/tokens.less';
|
|
|
+
|
|
|
+ .empty-state {
|
|
|
+ /* width:100% 是必需的:本组件会被放进 flex 容器(如工具标签区),
|
|
|
+ 不写宽度时块级元素会退化成文字宽度,既不再撑满一行、也失去居中的视觉位置 */
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-state-md {
|
|
|
+ padding: 20px 0;
|
|
|
+ font-size: 13px;
|
|
|
+ color: @color-text-muted;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-state-sm {
|
|
|
+ padding: 12px 0;
|
|
|
+ font-size: 12px;
|
|
|
+ color: @color-text-dim;
|
|
|
+ }
|
|
|
+</style>
|