a

src/components/TeacherNameNo/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <!-- 方案1: 姓名用 tag，工号普通文本 -->
+  <div v-if="variant === 'tag-name'" class="teacher-name-no">
+    <el-tag size="small" type="primary" effect="plain">{{ name || '-' }}</el-tag>
+    <span class="separator">/</span>
+    <span class="no">{{ no || '-' }}</span>
+  </div>
+  
+  <!-- 方案2: 工号用 tag，姓名普通文本（推荐） -->
+  <div v-else-if="variant === 'tag-no'" class="teacher-name-no">
+    <span class="name">{{ name || '-' }}</span>
+    <span class="separator">/</span>
+    <el-tag size="small" type="primary" effect="plain">{{ no || '-' }}</el-tag>
+  </div>
+  
+  <!-- 方案3: 姓名和工号都用 tag -->
+  <div v-else-if="variant === 'tag-both'" class="teacher-name-no">
+    <el-tag size="small" type="primary" effect="plain">{{ name || '-' }}</el-tag>
+    <span class="separator">/</span>
+    <el-tag size="small" type="info" effect="plain">{{ no || '-' }}</el-tag>
+  </div>
+  
+  <!-- 方案4: 姓名用 tag（实心），工号普通文本 -->
+  <div v-else-if="variant === 'tag-name-solid'" class="teacher-name-no">
+    <el-tag size="small" type="primary">{{ name || '-' }}</el-tag>
+    <span class="separator">/</span>
+    <span class="no">{{ no || '-' }}</span>
+  </div>
+  
+  <!-- 方案5: 姓名用彩色背景，工号普通文本 -->
+  <div v-else-if="variant === 'badge-name'" class="teacher-name-no">
+    <span class="name-badge">{{ name || '-' }}</span>
+    <span class="separator">/</span>
+    <span class="no">{{ no || '-' }}</span>
+  </div>
+  
+  <!-- 默认方案: 姓名普通文本，工号轻量徽章（推荐，与页面协调） -->
+  <div v-else class="teacher-name-no">
+    <span class="name">{{ name || '-' }}</span>
+    <span class="separator">/</span>
+    <span class="no-badge">{{ no || '-' }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  name?: string;
+  no?: string;
+  variant?: 'default' | 'tag-name' | 'tag-no' | 'tag-both' | 'tag-name-solid' | 'badge-name';
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'default'
+});
+</script>
+
+<style scoped>
+.teacher-name-no {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.name {
+  font-weight: 500;
+  color: #303133;
+}
+
+.separator {
+  font-size: 12px;
+  color: #909399;
+}
+
+.no {
+  font-size: 12px;
+  color: #606266;
+}
+
+.no-primary {
+  font-size: 12px;
+  color: var(--el-color-primary, #667eea);
+  font-weight: 500;
+}
+
+.no-badge {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--el-color-primary-light-9, #ecf5ff);
+  color: var(--el-color-primary, #667eea);
+  line-height: 1.2;
+}
+
+.name-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 500;
+  font-size: 12px;
+  background: var(--el-color-primary-light-9, #ecf5ff);
+  color: var(--el-color-primary, #667eea);
+}
+</style>
+