platform-vue/src/views/accountpool/windsurf/components/detail.vue

<script setup>
import { computed, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  row: { type: Object, default: null },
  saveLoading: { type: Boolean, default: false },
});

const emit = defineEmits(['update:modelValue', 'save-remark']);
const remarkText = ref('');

function typeText(type) {
  if (type === 'account') return '账号密码';
  if (type === 'account_tk') return '账号密码+Token';
  return 'Token';
}

const PLATFORM_MAP = {
  local: { label: '本地', type: 'info' },
  xianyu: { label: '闲鱼', type: 'warning' },
  taobao: { label: '淘宝', type: 'info' },
  pinduoduo: { label: '拼多多', type: 'danger' },
  jingdong: { label: '京东', type: 'primary' },
  douyin: { label: '抖音', type: 'success' },
  ziyoushangcheng: { label: '自有商城', type: 'warning' },
};

const platformLabel = computed(() => {
  if (!props.row?.extractedPlatform) return '-';
  return PLATFORM_MAP[props.row.extractedPlatform]?.label || props.row.extractedPlatform;
});

const platformType = computed(() => {
  if (!props.row?.extractedPlatform) return 'info';
  return PLATFORM_MAP[props.row.extractedPlatform]?.type || 'info';
});

watch(
  () => props.row,
  (row) => {
    remarkText.value = row?.remark || '';
  },
  { immediate: true }
);

function onSaveRemark() {
  if (!props.row?.id) return;
  emit('save-remark', { id: props.row.id, remark: remarkText.value || '' });
}

function copyAccountPassword() {
  const account = props.row?.account || '';
  const password = props.row?.password || '';
  if (!account && !password) {
    ElMessage.warning('暂无账号密码可复制');
    return;
  }
  navigator.clipboard.writeText(`${account}\n${password}`.trim()).then(() => {
    ElMessage.success('已复制账号+密码');
  });
}

function copyToken() {
  const token = props.row?.token || '';
  if (!token) {
    ElMessage.warning('暂无 Token 可复制');
    return;
  }
  navigator.clipboard.writeText(token).then(() => {
    ElMessage.success('已复制 Token');
  });
}
</script>

<template>
  <el-dialog
    class="pool-detail-dialog"
    :model-value="modelValue"
    title="账号详情"
    width="90%"
    @update:model-value="(v) => emit('update:modelValue', v)"
  >
    <el-descriptions :column="1" border v-if="row">
      <el-descriptions-item label="ID">{{ row.id }}</el-descriptions-item>
      <el-descriptions-item label="账号类型">{{ typeText(row.type) }}</el-descriptions-item>
      <el-descriptions-item label="账号">{{ row.account || '-' }}</el-descriptions-item>
      <el-descriptions-item label="密码">{{ row.password || '-' }}</el-descriptions-item>
      <el-descriptions-item label="Token">
        <span class="token-text">{{ row.token || '-' }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="提取状态">{{ row.extracted ? '已提取' : '未提取' }}</el-descriptions-item>
      <el-descriptions-item label="提取时间">{{ row.extractedAt || '-' }}</el-descriptions-item>
      <el-descriptions-item label="提取平台">
        <el-tag v-if="row.extractedPlatform" :type="platformType" size="small">{{ platformLabel }}</el-tag>
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="复制">
        <div class="copy-actions">
          <el-button size="small" @click="copyAccountPassword">账号+密码</el-button>
          <el-button size="small" type="primary" @click="copyToken">Token</el-button>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        <div class="remark-edit-wrap">
          <el-input v-model="remarkText" type="textarea" :rows="3" placeholder="请输入备注" />
          <el-button type="primary" size="small" :loading="saveLoading" @click="onSaveRemark">
            保存备注
          </el-button>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<style scoped>
.token-text {
  word-break: break-all;
  white-space: pre-wrap;
  line-height: 1.6;
}

.remark-edit-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.remark-edit-wrap .el-button {
  align-self: flex-start;
}

:deep(.pool-detail-dialog) {
  max-width: 560px;
}

@media (max-width: 768px) {
  :deep(.pool-detail-dialog) {
    width: calc(100vw - 24px) !important;
    margin: 0 auto;
  }

  :deep(.pool-detail-dialog .el-dialog__body) {
    padding: 12px;
    max-height: 70vh;
    overflow-y: auto;
  }

  :deep(.pool-detail-dialog .el-descriptions__label) {
    width: 72px;
    word-break: break-all;
    white-space: normal;
  }

  .remark-edit-wrap .el-button {
    width: 100%;
    align-self: stretch;
  }
}
</style>