library-picturebook-activity/frontend/src/views/system/tenant-info/Index.vue

<template>
  <div class="tenant-info-page">
    <a-card class="title-card">
      <template #title>机构信息</template>
    </a-card>

    <a-spin :spinning="loading">
      <div v-if="tenant" class="info-content">
        <!-- 基本信息卡片 -->
        <a-card title="基本信息" :bordered="false" class="section-card">
          <a-descriptions :column="2" bordered size="small">
            <a-descriptions-item label="机构名称" :span="2">
              <div class="editable-field">
                <span v-if="!editing">{{ tenant.name }}</span>
                <a-input v-else v-model:value="editForm.name" style="max-width: 300px" />
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="机构编码">
              <a-tag color="blue">{{ tenant.code }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="机构类型">
              <a-tag :color="tenantTypeColor(tenant.tenantType)">{{ tenantTypeLabel(tenant.tenantType) }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="登录地址" :span="2">
              <span class="url-text">/{{ tenant.code }}/login</span>
              <a-button type="link" size="small" @click="copyLoginUrl">
                <copy-outlined /> 复制
              </a-button>
            </a-descriptions-item>
            <a-descriptions-item label="状态">
              <a-badge :status="tenant.validState === 1 ? 'success' : 'error'" :text="tenant.validState === 1 ? '正常' : '停用'" />
            </a-descriptions-item>
            <a-descriptions-item label="创建时间">{{ formatDate(tenant.createTime) }}</a-descriptions-item>
            <a-descriptions-item label="机构描述" :span="2">
              <div class="editable-field">
                <span v-if="!editing">{{ tenant.description || '暂无描述' }}</span>
                <a-textarea v-else v-model:value="editForm.description" :rows="3" style="max-width: 400px" placeholder="机构描述" />
              </div>
            </a-descriptions-item>
          </a-descriptions>

          <div class="edit-actions" style="margin-top: 16px">
            <template v-if="!editing">
              <a-button type="primary" @click="startEdit">
                <template #icon><edit-outlined /></template>
                编辑信息
              </a-button>
            </template>
            <template v-else>
              <a-space>
                <a-button type="primary" :loading="saving" @click="handleSave">保存</a-button>
                <a-button @click="cancelEdit">取消</a-button>
              </a-space>
            </template>
          </div>
        </a-card>

        <!-- 统计信息 -->
        <a-card title="数据概况" :bordered="false" class="section-card" style="margin-top: 16px">
          <div class="stats-grid">
            <div class="stat-item">
              <span class="stat-value">{{ tenant._count?.users || 0 }}</span>
              <span class="stat-label">用户数</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ tenant._count?.roles || 0 }}</span>
              <span class="stat-label">角色数</span>
            </div>
          </div>
        </a-card>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { EditOutlined, CopyOutlined } from '@ant-design/icons-vue'
import request from '@/utils/request'
import dayjs from 'dayjs'

const loading = ref(true)
const saving = ref(false)
const editing = ref(false)
const tenant = ref<any>(null)
const editForm = reactive({ name: '', description: '' })

const tenantTypeLabel = (type: string) => {
  const map: Record<string, string> = { library: '图书馆', kindergarten: '幼儿园', school: '学校', institution: '社会机构', other: '其他' }
  return map[type] || type
}

const tenantTypeColor = (type: string) => {
  const map: Record<string, string> = { library: 'purple', kindergarten: 'green', school: 'blue', institution: 'orange', other: 'default' }
  return map[type] || 'default'
}

const formatDate = (d: string) => d ? dayjs(d).format('YYYY-MM-DD') : '-'

const copyLoginUrl = () => {
  const url = `${window.location.origin}/${tenant.value.code}/login`
  navigator.clipboard.writeText(url).then(() => message.success('已复制')).catch(() => message.info(url))
}

const fetchTenant = async () => {
  loading.value = true
  try {
    tenant.value = await request.get('/tenants/my-tenant')
  } catch {
    message.error('获取机构信息失败')
  } finally {
    loading.value = false
  }
}

const startEdit = () => {
  editForm.name = tenant.value.name
  editForm.description = tenant.value.description || ''
  editing.value = true
}

const cancelEdit = () => { editing.value = false }

const handleSave = async () => {
  if (!editForm.name.trim()) { message.warning('机构名称不能为空'); return }
  saving.value = true
  try {
    await request.patch('/tenants/my-tenant', {
      name: editForm.name,
      description: editForm.description || undefined,
    })
    message.success('保存成功')
    editing.value = false
    fetchTenant()
  } catch {
    message.error('保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(fetchTenant)
</script>

<style scoped lang="scss">
$primary: #6366f1;

.title-card { margin-bottom: 16px; border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  :deep(.ant-card-head) { border-bottom: none; .ant-card-head-title { font-size: 18px; font-weight: 600; } }
  :deep(.ant-card-body) { padding: 0; }
}

.section-card {
  border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  :deep(.ant-card-head) { .ant-card-head-title { font-size: 15px; font-weight: 600; } }
}

.url-text { font-family: monospace; font-size: 13px; color: #6b7280; }

.editable-field { min-height: 22px; }

.stats-grid {
  display: flex; gap: 32px;
  .stat-item {
    display: flex; flex-direction: column; align-items: center;
    .stat-value { font-size: 28px; font-weight: 700; color: #1e1b4b; }
    .stat-label { font-size: 13px; color: #9ca3af; }
  }
}
</style>