assistant/components/WorkspaceItem.uvue

<template>
  <view class="workspace-item" :style="{ borderLeftColor: accentColor }" @tap="onTap">
    <!-- Header row -->
    <view class="workspace-item__header">
      <text class="workspace-item__icon">{{ typeIcon }}</text>
      <text class="workspace-item__type">{{ typeLabel }}</text>
      <text class="workspace-item__time">{{ formatTime(item.createdAt) }}</text>
    </view>

    <!-- Title -->
    <text class="workspace-item__title">{{ item.title }}</text>

    <!-- Summary -->
    <text class="workspace-item__summary">{{ item.summary }}</text>
  </view>
</template>

<script setup lang="uts">
import type { WorkspaceItem, WorkspaceItemType } from '@/types/index'
import { WORKFLOWS } from '@/constants/index'

const props = defineProps<{
  item: WorkspaceItem
}>()

const emit = defineEmits<{
  tap: []
}>()

// Type icon mapping
const typeIcon = computed<string>(() => {
  const icons: Record<WorkspaceItemType, string> = {
    code_snippet: '💻',
    document: '📝',
    analysis_report: '📊',
    creative_output: '✨',
  }
  return icons[props.item.type] ?? '📄'
})

// Type label mapping
const typeLabel = computed<string>(() => {
  const labels: Record<WorkspaceItemType, string> = {
    code_snippet: '代码',
    document: '文档',
    analysis_report: '报告',
    creative_output: '创意',
  }
  return labels[props.item.type] ?? '结果'
})

// Accent color from workflow
const accentColor = computed<string>(() => {
  const wf = WORKFLOWS.find((w) => w.id === props.item.workflowId)
  return wf ? wf.color : '#6c5ce7'
})

function formatTime(timestamp: number): string {
  const d = new Date(timestamp)
  const m = (d.getMonth() + 1).toString().padStart(2, '0')
  const day = d.getDate().toString().padStart(2, '0')
  const h = d.getHours().toString().padStart(2, '0')
  const min = d.getMinutes().toString().padStart(2, '0')
  return `${m}/${day} ${h}:${min}`
}

function onTap(): void {
  emit('tap')
}
</script>

<style scoped>
.workspace-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx 24rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  background: rgba(255, 255, 255, 0.04);
  border-left: 4rpx solid #6c5ce7;
  transition: background 0.2s ease;
}

.workspace-item:active {
  background: rgba(255, 255, 255, 0.07);
}

.workspace-item__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10rpx;
}

.workspace-item__icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.workspace-item__type {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  flex: 1;
}

.workspace-item__time {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.3);
}

.workspace-item__title {
  font-size: 28rpx;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.workspace-item__summary {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>