|
|
@@ -0,0 +1,687 @@
|
|
|
+<template>
|
|
|
+ <div class="management-container">
|
|
|
+ <div class="page-header">
|
|
|
+ <div class="header-copy">
|
|
|
+ <h1>智能体管理</h1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="stats-grid">
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="stat-icon coral">
|
|
|
+ <SvgIcon name="platForm" size="20" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="stat-value">{{ pageData.totalCount }}</div>
|
|
|
+ <div class="stat-label">智能体总数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="stat-icon blue">
|
|
|
+ <SvgIcon name="workflow" size="20" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="stat-value">{{ agents.length }}</div>
|
|
|
+ <div class="stat-label">当前页数量</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="stat-icon green">
|
|
|
+ <SvgIcon name="service" size="20" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="stat-value">{{ totalConversationVariables }}</div>
|
|
|
+ <div class="stat-label">会话变量数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="stat-icon orange">
|
|
|
+ <SvgIcon name="setting" size="20" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="stat-value">{{ totalEnvVariables }}</div>
|
|
|
+ <div class="stat-label">环境变量数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel">
|
|
|
+ <div class="toolbar">
|
|
|
+ <el-input
|
|
|
+ v-model="keyword"
|
|
|
+ placeholder="搜索当前页的智能体名称或 ID"
|
|
|
+ clearable
|
|
|
+ class="search-input"
|
|
|
+ >
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon><Search /></el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+
|
|
|
+ <div class="toolbar-meta">
|
|
|
+ <el-button type="primary" link :loading="loading" @click="loadAgents(pageIndex)">
|
|
|
+ <el-icon><RefreshRight /></el-icon>
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <span class="meta-pill"
|
|
|
+ >第 {{ pageData.currentPage || 1 }} / {{ pageData.totalPages || 1 }} 页</span
|
|
|
+ >
|
|
|
+ <span class="meta-pill">{{ pageData.pageSize }} 条/页</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-loading="loading" class="card-grid">
|
|
|
+ <div
|
|
|
+ v-for="row in filteredAgents"
|
|
|
+ :key="row.id"
|
|
|
+ class="agent-card"
|
|
|
+ @click="handleRowClick(row)"
|
|
|
+ >
|
|
|
+ <div class="cover">
|
|
|
+ <img
|
|
|
+ v-if="row.profilePhoto"
|
|
|
+ :src="row.profilePhoto"
|
|
|
+ :alt="row.name"
|
|
|
+ class="cover-image"
|
|
|
+ />
|
|
|
+ <div v-else class="cover-fallback">
|
|
|
+ <div class="fallback-monogram">{{ row.name?.slice(0, 1) || 'A' }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cover-gradient"></div>
|
|
|
+
|
|
|
+ <div class="cover-top">
|
|
|
+ <span class="cover-badge">智能体</span>
|
|
|
+ <span class="cover-badge subtle">{{ row.env_variables.length }} 个环境变量</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cover-bottom">
|
|
|
+ <el-avatar :size="56" :src="row.profilePhoto || undefined" class="cover-avatar">
|
|
|
+ {{ row.name?.slice(0, 1) || 'A' }}
|
|
|
+ </el-avatar>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="card-head">
|
|
|
+ <div class="card-title-wrap">
|
|
|
+ <div class="agent-name" :title="row.name || fallbackText.unnamed">
|
|
|
+ {{ row.name || fallbackText.unnamed }}
|
|
|
+ </div>
|
|
|
+ <div class="agent-id" :title="row.id">{{ row.id }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-footer">
|
|
|
+ <el-button type="primary" @click.stop="openAgent(row.id)">打开</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-empty
|
|
|
+ v-if="!filteredAgents.length && !loading"
|
|
|
+ :description="keyword ? emptyText.filtered : emptyText.default"
|
|
|
+ class="empty-state"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next, total"
|
|
|
+ :current-page="pageIndex"
|
|
|
+ :page-size="pageData.pageSize || 10"
|
|
|
+ :total="pageData.totalCount"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed, onMounted, ref } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import { RefreshRight, Search } from '@element-plus/icons-vue'
|
|
|
+import { agent } from '@repo/api-service'
|
|
|
+
|
|
|
+import SvgIcon from '@/components/SvgIcon/index.vue'
|
|
|
+
|
|
|
+type AgentListResponse = Awaited<ReturnType<typeof agent.postAgentGetAgentList>>
|
|
|
+type AgentListResult = NonNullable<AgentListResponse['result']>
|
|
|
+type AgentListItem = AgentListResult['model'][number]
|
|
|
+
|
|
|
+const createEmptyPageData = (): AgentListResult => ({
|
|
|
+ currentPage: 1,
|
|
|
+ hasNextPage: false,
|
|
|
+ hasPreviousPage: false,
|
|
|
+ model: [],
|
|
|
+ pageSize: 10,
|
|
|
+ totalCount: 0,
|
|
|
+ totalPages: 0
|
|
|
+})
|
|
|
+
|
|
|
+const fallbackText = {
|
|
|
+ unnamed: '未命名智能体',
|
|
|
+ notConfiguredConversation: '未配置会话变量',
|
|
|
+ notConfiguredEnv: '未配置环境变量'
|
|
|
+} as const
|
|
|
+
|
|
|
+const emptyText = {
|
|
|
+ default: '暂无智能体数据',
|
|
|
+ filtered: '当前筛选条件下暂无数据'
|
|
|
+} as const
|
|
|
+
|
|
|
+const separator = '、'
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const loading = ref(false)
|
|
|
+const keyword = ref('')
|
|
|
+const pageIndex = ref(1)
|
|
|
+const pageData = ref<AgentListResult>(createEmptyPageData())
|
|
|
+
|
|
|
+const agents = computed(() => pageData.value.model)
|
|
|
+
|
|
|
+const filteredAgents = computed(() => {
|
|
|
+ const searchValue = keyword.value.trim().toLowerCase()
|
|
|
+
|
|
|
+ if (!searchValue) {
|
|
|
+ return agents.value
|
|
|
+ }
|
|
|
+
|
|
|
+ return agents.value.filter((item) => {
|
|
|
+ const name = item.name.toLowerCase()
|
|
|
+ const id = item.id.toLowerCase()
|
|
|
+ return name.includes(searchValue) || id.includes(searchValue)
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+const totalConversationVariables = computed(() =>
|
|
|
+ agents.value.reduce((total, item) => total + item.conversation_variables.length, 0)
|
|
|
+)
|
|
|
+
|
|
|
+const totalEnvVariables = computed(() =>
|
|
|
+ agents.value.reduce((total, item) => total + item.env_variables.length, 0)
|
|
|
+)
|
|
|
+
|
|
|
+const formatConversationVariables = (variables: AgentListItem['conversation_variables']) => {
|
|
|
+ if (!variables.length) {
|
|
|
+ return fallbackText.notConfiguredConversation
|
|
|
+ }
|
|
|
+
|
|
|
+ return variables.slice(0, 4).join(separator) + (variables.length > 4 ? '...' : '')
|
|
|
+}
|
|
|
+
|
|
|
+const formatEnvVariables = (variables: AgentListItem['env_variables']) => {
|
|
|
+ if (!variables.length) {
|
|
|
+ return fallbackText.notConfiguredEnv
|
|
|
+ }
|
|
|
+
|
|
|
+ const labels = variables.slice(0, 3).map((item) => item.name || item.type)
|
|
|
+ return labels.join(separator) + (variables.length > 3 ? '...' : '')
|
|
|
+}
|
|
|
+
|
|
|
+const openAgent = (id: string) => {
|
|
|
+ router.push(`/workflow/${id}`)
|
|
|
+}
|
|
|
+
|
|
|
+const handleRowClick = (row: AgentListItem) => {
|
|
|
+ openAgent(row.id)
|
|
|
+}
|
|
|
+
|
|
|
+const loadAgents = async (targetPage = 1) => {
|
|
|
+ loading.value = true
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await agent.postAgentGetAgentList({
|
|
|
+ pageIndex: targetPage
|
|
|
+ })
|
|
|
+
|
|
|
+ if (!response.isSuccess || !response.result) {
|
|
|
+ throw new Error('获取智能体列表失败')
|
|
|
+ }
|
|
|
+
|
|
|
+ pageData.value = response.result
|
|
|
+ pageIndex.value = response.result.currentPage || targetPage
|
|
|
+ } catch (error) {
|
|
|
+ console.error('loadAgents error', error)
|
|
|
+ ElMessage.error('加载智能体列表失败')
|
|
|
+ pageData.value = createEmptyPageData()
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handlePageChange = (nextPage: number) => {
|
|
|
+ pageIndex.value = nextPage
|
|
|
+ loadAgents(nextPage)
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ loadAgents(pageIndex.value)
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.management-container {
|
|
|
+ max-width: 1320px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 28px 24px 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.page-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 20px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-copy {
|
|
|
+ h1 {
|
|
|
+ margin: 6px 0 8px;
|
|
|
+ font-size: 30px;
|
|
|
+ line-height: 1.1;
|
|
|
+ color: var(--text-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ max-width: 720px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.7;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.eyebrow {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 6px 10px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: rgba(255, 107, 107, 0.1);
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 0.08em;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
|
+ gap: 16px;
|
|
|
+ margin-bottom: 22px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-card {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 14px;
|
|
|
+ padding: 18px;
|
|
|
+ border: 1px solid var(--border-light);
|
|
|
+ border-radius: 18px;
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 247, 250, 0.8)), var(--bg-base);
|
|
|
+ box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.stat-icon {
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 14px;
|
|
|
+
|
|
|
+ &.coral {
|
|
|
+ background: #fff1f0;
|
|
|
+ color: #ff6b6b;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blue {
|
|
|
+ background: #eef4ff;
|
|
|
+ color: #3b82f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.green {
|
|
|
+ background: #ecfdf3;
|
|
|
+ color: #10b981;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.orange {
|
|
|
+ background: #fff7ed;
|
|
|
+ color: #f97316;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stat-value {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--text-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.stat-label {
|
|
|
+ margin-top: 2px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--text-secondary);
|
|
|
+}
|
|
|
+
|
|
|
+.panel {
|
|
|
+ padding: 22px;
|
|
|
+ border: 1px solid var(--border-light);
|
|
|
+ border-radius: 22px;
|
|
|
+ background: var(--bg-base);
|
|
|
+ box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+.toolbar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 16px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-input {
|
|
|
+ max-width: 340px;
|
|
|
+}
|
|
|
+
|
|
|
+.toolbar-meta {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.meta-pill {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border: 1px solid var(--border-light);
|
|
|
+ border-radius: 999px;
|
|
|
+ background: var(--bg-container);
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-secondary);
|
|
|
+}
|
|
|
+
|
|
|
+.card-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
|
+ gap: 20px;
|
|
|
+ min-height: 240px;
|
|
|
+}
|
|
|
+
|
|
|
+.agent-card {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid var(--border-light);
|
|
|
+ border-radius: 22px;
|
|
|
+ background: var(--bg-base);
|
|
|
+ box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ transition:
|
|
|
+ transform 0.18s ease,
|
|
|
+ box-shadow 0.18s ease,
|
|
|
+ border-color 0.18s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-6px);
|
|
|
+ border-color: rgba(255, 107, 107, 0.24);
|
|
|
+ box-shadow: 0 20px 46px rgba(15, 23, 42, 0.1);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.cover {
|
|
|
+ position: relative;
|
|
|
+ height: 188px;
|
|
|
+ overflow: hidden;
|
|
|
+ background:
|
|
|
+ radial-gradient(circle at top left, rgba(255, 107, 107, 0.28), transparent 38%),
|
|
|
+ radial-gradient(circle at right bottom, rgba(59, 130, 246, 0.24), transparent 34%),
|
|
|
+ linear-gradient(135deg, #f8fafc, #eef2ff);
|
|
|
+}
|
|
|
+
|
|
|
+.cover-image,
|
|
|
+.cover-fallback {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.cover-image {
|
|
|
+ display: block;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.cover-fallback {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.fallback-monogram {
|
|
|
+ width: 84px;
|
|
|
+ height: 84px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 24px;
|
|
|
+ background: rgba(255, 255, 255, 0.7);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ font-size: 38px;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #ff6b6b;
|
|
|
+}
|
|
|
+
|
|
|
+.cover-gradient {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background: linear-gradient(180deg, rgba(10, 10, 10, 0.02), rgba(10, 10, 10, 0.5));
|
|
|
+}
|
|
|
+
|
|
|
+.cover-top {
|
|
|
+ position: absolute;
|
|
|
+ top: 14px;
|
|
|
+ left: 14px;
|
|
|
+ right: 14px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.cover-badge {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 6px 10px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: rgba(255, 255, 255, 0.92);
|
|
|
+ color: #1f2937;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ &.subtle {
|
|
|
+ background: rgba(15, 23, 42, 0.58);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.cover-bottom {
|
|
|
+ position: absolute;
|
|
|
+ left: 18px;
|
|
|
+ top: 160px;
|
|
|
+}
|
|
|
+
|
|
|
+.cover-avatar {
|
|
|
+ border: 4px solid var(--bg-base);
|
|
|
+ box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
|
|
|
+}
|
|
|
+
|
|
|
+.card-body {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 40px 18px 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title-wrap {
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.agent-name {
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1.3;
|
|
|
+ color: var(--text-primary);
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.agent-id {
|
|
|
+ margin-top: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.enter-link {
|
|
|
+ padding-right: 0;
|
|
|
+ padding-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.metric-row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.metric-card {
|
|
|
+ padding: 12px 14px;
|
|
|
+ border: 1px solid var(--border-light);
|
|
|
+ border-radius: 16px;
|
|
|
+ background: var(--bg-container);
|
|
|
+}
|
|
|
+
|
|
|
+.metric-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-tertiary);
|
|
|
+}
|
|
|
+
|
|
|
+.metric-value {
|
|
|
+ margin-top: 6px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1;
|
|
|
+ color: var(--text-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.detail-panel {
|
|
|
+ display: grid;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 16px;
|
|
|
+ padding: 14px;
|
|
|
+ border-radius: 18px;
|
|
|
+ background: linear-gradient(180deg, var(--bg-container), rgba(245, 247, 250, 0.4));
|
|
|
+}
|
|
|
+
|
|
|
+.detail-item {
|
|
|
+ padding-bottom: 12px;
|
|
|
+ border-bottom: 1px solid var(--border-light);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ padding-bottom: 0;
|
|
|
+ border-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.detail-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-tertiary);
|
|
|
+}
|
|
|
+
|
|
|
+.detail-value {
|
|
|
+ margin-top: 6px;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.65;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ word-break: break-word;
|
|
|
+}
|
|
|
+
|
|
|
+.card-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: auto;
|
|
|
+ padding-top: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-state {
|
|
|
+ grid-column: 1 / -1;
|
|
|
+ padding: 30px 0 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 960px) {
|
|
|
+ .page-header,
|
|
|
+ .toolbar {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: stretch;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-input {
|
|
|
+ max-width: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toolbar-meta,
|
|
|
+ .pagination {
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 640px) {
|
|
|
+ .management-container {
|
|
|
+ padding: 18px 14px 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel {
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cover {
|
|
|
+ height: 172px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-head {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .enter-link,
|
|
|
+ .card-footer :deep(.el-button) {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
jiaxing.liao