template> <v-card variant="outlined" class="mb-4"> <v-card-title>{{ projectConfig?.projectName }}</v-card-title> <v-card-subtitle>{{ projectSlug }}</v-card-subtitle> <v-card-text> <p>{{ projectConfig?.description }}</p> <v-divider class="my-3"></v-divider>
    <!-- Display Logical Groups -->
    <template v-if="projectConfig?.logicalGroups && projectConfig.logicalGroups.length > 0">
      <strong>实验组:</strong>
      <v-chip-group column class="mt-2">
        <v-chip v-for="group in projectConfig.logicalGroups" :key="group.slug" label size="small">
          {{ group.name }}
        </v-chip>
      </v-chip-group>
      <v-divider class="my-3"></v-divider>
    </template>
    <p v-else-if="projectConfig" class="text-medium-emphasis text-caption">No logical groups defined.</p>


    <!-- Display Physical Sources -->
    <template v-if="projectConfig?.physicalSources && projectConfig.physicalSources.length > 0">
      <strong>数据采集设备:</strong>
      <v-list density="compact">
        <v-list-item v-for="source in projectConfig.physicalSources" :key="source.id">
          <template v-slot:prepend>
            <v-icon :color="getSourceColor(source.type)">{{ getSourceIcon(source.type) }}</v-icon>
          </template>
          <v-list-item-title>{{ source.name }} ({{ source.description }})</v-list-item-title>
          <v-list-item-subtitle>类型: {{ source.type }}</v-list-item-subtitle>
          <v-list-item-subtitle style="margin-top: 5px;">
            采集:
            <template v-if="source.associatedLogicalGroups && source.associatedLogicalGroups.length > 0">
              <v-chip size="x-small" label class="ml-1" v-for="groupSlug in source.associatedLogicalGroups" :key="groupSlug">
                {{ getGroupName(groupSlug) }}
              </v-chip>
            </template>
            <span v-else class="text-medium-emphasis text-caption ml-1">None</span>
          </v-list-item-subtitle>
        </v-list-item>
      </v-list>
    </template>
     <p v-else-if="projectConfig" class="text-medium-emphasis text-caption">No physical sources defined.</p>

  </v-card-text>
</v-card>
</template>
<script setup> import { defineProps } from 'vue'; const props = defineProps({ projectConfig: { type: Object, required: true, default: () => ({}), // Provide a default empty object }, projectSlug: { type: String, required: true, }, }); // --- Helper Functions (moved from parent) --- const getGroupName = (slug) => { if (!props.projectConfig || !props.projectConfig.logicalGroups) return slug; return props.projectConfig.logicalGroups.find(g => g.slug === slug)?.name || slug; }; const getSourceIcon = (type) => { return { camera: 'mdi-camera', hotimage: 'mdi-thermometer-lines', intensity: 'mdi-lightbulb-on-outline', tempRH: 'mdi-water-percent' }[type] || 'mdi-help-circle-outline'; }; const getSourceColor = (type) => { return { camera: 'blue', hotimage: 'red', intensity: 'orange', tempRH: 'teal' }[type] || 'grey'; }; </script>
<style scoped> /* Add any specific styles for this component if needed */ .text-medium-emphasis { color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); } .text-caption { font-size: 0.75rem !important; font-weight: 400; line-height: 1.25rem; letter-spacing: 0.0333333333em !important; text-trans

重构我的代码，让标题居中放大，描述现代段落样式。实验组卡片，标题和描述（手机竖排，电脑横排）。采集设备折叠并放在后面