删除首页孤儿组件（CommandList/DiaryList/FileList/ReplyList）
早期首页版本遗留，全项目无任何引用（import/动态导入/barrel 导出均无命中）， 已核验不影响编译与功能。 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
@@ -1,164 +0,0 @@
|
||||
<template>
|
||||
<div class="command-list">
|
||||
<div v-for="command in commandList" :key="command.id" class="command-card" @click="handleCommandClick(command)">
|
||||
<div class="command-icon">
|
||||
<el-icon :size="32" color="#3b82f6">
|
||||
<Lightning />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="command-content">
|
||||
<h3 class="command-name">{{ command.name }}</h3>
|
||||
<p class="command-desc">{{ command.description }}</p>
|
||||
<div class="command-trigger">
|
||||
<el-tag size="small" type="info">{{ command.trigger }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="command-actions">
|
||||
<el-button text size="small" @click.stop="handleEdit(command)">
|
||||
<el-icon><Edit /></el-icon>
|
||||
</el-button>
|
||||
<el-button text size="small" type="danger" @click.stop="handleDelete(command)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Lightning, Edit, Delete } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
interface Command {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
trigger: string;
|
||||
action: string;
|
||||
}
|
||||
|
||||
const commandList = ref<Command[]>([
|
||||
{
|
||||
id: 1,
|
||||
name: '快速创建组件',
|
||||
description: '快速创建一个 Vue 组件模板，包含基础结构和样式',
|
||||
trigger: '/component',
|
||||
action: 'create_component',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '生成 API 接口',
|
||||
description: '根据接口文档快速生成 API 请求函数',
|
||||
trigger: '/api',
|
||||
action: 'generate_api',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '代码格式化',
|
||||
description: '格式化当前文件的代码，统一代码风格',
|
||||
trigger: '/format',
|
||||
action: 'format_code',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '添加类型定义',
|
||||
description: '为 JavaScript 代码添加 TypeScript 类型定义',
|
||||
trigger: '/types',
|
||||
action: 'add_types',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '生成测试用例',
|
||||
description: '为当前组件或函数生成单元测试代码',
|
||||
trigger: '/test',
|
||||
action: 'generate_test',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '优化性能',
|
||||
description: '分析代码并提供性能优化建议',
|
||||
trigger: '/optimize',
|
||||
action: 'optimize_code',
|
||||
},
|
||||
]);
|
||||
|
||||
const handleCommandClick = (command: Command) => {
|
||||
ElMessage.success(`执行指令: ${command.name}`);
|
||||
};
|
||||
|
||||
const handleEdit = (command: Command) => {
|
||||
ElMessage.info(`编辑指令: ${command.name}`);
|
||||
};
|
||||
|
||||
const handleDelete = (command: Command) => {
|
||||
ElMessage.warning(`删除指令: ${command.name}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.command-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.command-card {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e5e7eb;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
border-color: #3b82f6;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.command-icon {
|
||||
flex-shrink: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.command-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.command-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.command-desc {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.command-trigger {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.command-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,171 +0,0 @@
|
||||
<template>
|
||||
<div class="diary-list">
|
||||
<div v-for="diary in diaryList" :key="diary.id" class="diary-card" @click="handleDiaryClick(diary)">
|
||||
<div class="diary-header">
|
||||
<div class="diary-date">
|
||||
<el-icon><Calendar /></el-icon>
|
||||
{{ diary.date }}
|
||||
</div>
|
||||
<el-tag :type="diary.mood === 'happy' ? 'success' : diary.mood === 'sad' ? 'danger' : 'warning'" size="small">
|
||||
{{ getMoodText(diary.mood) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<h3 class="diary-title">{{ diary.title }}</h3>
|
||||
<p class="diary-content">{{ diary.content }}</p>
|
||||
<div class="diary-footer">
|
||||
<div class="diary-tags">
|
||||
<el-tag v-for="tag in diary.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
|
||||
</div>
|
||||
<div class="diary-actions">
|
||||
<el-button text size="small" @click.stop="handleEdit(diary)">
|
||||
<el-icon><Edit /></el-icon>
|
||||
</el-button>
|
||||
<el-button text size="small" type="danger" @click.stop="handleDelete(diary)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Calendar, Edit, Delete } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
interface Diary {
|
||||
id: number;
|
||||
title: string;
|
||||
content: string;
|
||||
date: string;
|
||||
mood: 'happy' | 'sad' | 'normal';
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
const diaryList = ref<Diary[]>([
|
||||
{
|
||||
id: 1,
|
||||
title: '今天学习了 Vue 3 新特性',
|
||||
content: '今天深入学习了 Vue 3 的 Composition API，感觉比 Options API 更加灵活和强大。特别是 setup 函数和响应式系统的改进，让代码组织更加清晰...',
|
||||
date: '2026-05-26',
|
||||
mood: 'happy',
|
||||
tags: ['学习', 'Vue3', '前端'],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '项目进度顺利',
|
||||
content: '今天完成了首页重构的基础布局，整体效果不错。明天继续完善功能模块和样式细节...',
|
||||
date: '2026-05-25',
|
||||
mood: 'happy',
|
||||
tags: ['工作', '项目'],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '遇到了一些技术难题',
|
||||
content: '在处理复杂组件通信时遇到了一些问题，花了不少时间调试。最后通过重新设计数据流解决了...',
|
||||
date: '2026-05-24',
|
||||
mood: 'normal',
|
||||
tags: ['技术', '调试'],
|
||||
},
|
||||
]);
|
||||
|
||||
const getMoodText = (mood: string) => {
|
||||
const moodMap: Record<string, string> = {
|
||||
happy: '😊 开心',
|
||||
sad: '😢 难过',
|
||||
normal: '😐 平静',
|
||||
};
|
||||
return moodMap[mood] || '平静';
|
||||
};
|
||||
|
||||
const handleDiaryClick = (diary: Diary) => {
|
||||
ElMessage.info(`查看日记: ${diary.title}`);
|
||||
};
|
||||
|
||||
const handleEdit = (diary: Diary) => {
|
||||
ElMessage.info(`编辑日记: ${diary.title}`);
|
||||
};
|
||||
|
||||
const handleDelete = (diary: Diary) => {
|
||||
ElMessage.warning(`删除日记: ${diary.title}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.diary-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.diary-card {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e5e7eb;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
}
|
||||
|
||||
.diary-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.diary-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.diary-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 12px 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.diary-content {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 16px 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diary-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.diary-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.diary-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,199 +0,0 @@
|
||||
<template>
|
||||
<div class="file-list">
|
||||
<div v-for="file in fileList" :key="file.id" class="file-card" @click="handleFileClick(file)">
|
||||
<div class="file-icon">
|
||||
<el-icon :size="40" :color="getFileColor(file.type)">
|
||||
<component :is="getFileIcon(file.type)" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<h3 class="file-name">{{ file.name }}</h3>
|
||||
<div class="file-meta">
|
||||
<span class="file-size">{{ file.size }}</span>
|
||||
<span class="file-date">{{ file.date }}</span>
|
||||
</div>
|
||||
<div class="file-tags">
|
||||
<el-tag v-for="tag in file.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<el-button text size="small" @click.stop="handleDownload(file)">
|
||||
<el-icon><Download /></el-icon>
|
||||
</el-button>
|
||||
<el-button text size="small" type="danger" @click.stop="handleDelete(file)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Document, Picture, VideoPlay, Folder, Download, Delete } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
interface FileItem {
|
||||
id: number;
|
||||
name: string;
|
||||
type: 'document' | 'image' | 'video' | 'folder';
|
||||
size: string;
|
||||
date: string;
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
const fileList = ref<FileItem[]>([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Vue3 学习笔记.pdf',
|
||||
type: 'document',
|
||||
size: '2.5 MB',
|
||||
date: '2026-05-26',
|
||||
tags: ['学习', '文档'],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '项目截图.png',
|
||||
type: 'image',
|
||||
size: '856 KB',
|
||||
date: '2026-05-25',
|
||||
tags: ['截图', '项目'],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '演示视频.mp4',
|
||||
type: 'video',
|
||||
size: '15.3 MB',
|
||||
date: '2026-05-24',
|
||||
tags: ['视频', '演示'],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '项目文档',
|
||||
type: 'folder',
|
||||
size: '12 个文件',
|
||||
date: '2026-05-23',
|
||||
tags: ['文件夹'],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'API 接口文档.docx',
|
||||
type: 'document',
|
||||
size: '1.2 MB',
|
||||
date: '2026-05-22',
|
||||
tags: ['文档', 'API'],
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'UI 设计稿.sketch',
|
||||
type: 'image',
|
||||
size: '4.8 MB',
|
||||
date: '2026-05-21',
|
||||
tags: ['设计', 'UI'],
|
||||
},
|
||||
]);
|
||||
|
||||
const getFileIcon = (type: string) => {
|
||||
const iconMap: Record<string, any> = {
|
||||
document: Document,
|
||||
image: Picture,
|
||||
video: VideoPlay,
|
||||
folder: Folder,
|
||||
};
|
||||
return iconMap[type] || Document;
|
||||
};
|
||||
|
||||
const getFileColor = (type: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
document: '#3b82f6',
|
||||
image: '#10b981',
|
||||
video: '#f59e0b',
|
||||
folder: '#8b5cf6',
|
||||
};
|
||||
return colorMap[type] || '#6b7280';
|
||||
};
|
||||
|
||||
const handleFileClick = (file: FileItem) => {
|
||||
ElMessage.info(`打开文件: ${file.name}`);
|
||||
};
|
||||
|
||||
const handleDownload = (file: FileItem) => {
|
||||
ElMessage.success(`下载文件: ${file.name}`);
|
||||
};
|
||||
|
||||
const handleDelete = (file: FileItem) => {
|
||||
ElMessage.warning(`删除文件: ${file.name}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.file-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.file-card {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e5e7eb;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f3f4f6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 8px 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.file-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<div class="reply-list">
|
||||
<div v-for="reply in replyList" :key="reply.id" class="reply-card" @click="handleReplyClick(reply)">
|
||||
<div class="reply-header">
|
||||
<div class="reply-category">
|
||||
<el-tag :type="getCategoryType(reply.category)" size="small">{{ reply.category }}</el-tag>
|
||||
</div>
|
||||
<div class="reply-usage">
|
||||
<el-icon><ChatDotRound /></el-icon>
|
||||
<span>{{ reply.usageCount }} 次使用</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="reply-title">{{ reply.title }}</h3>
|
||||
<p class="reply-content">{{ reply.content }}</p>
|
||||
<div class="reply-footer">
|
||||
<div class="reply-tags">
|
||||
<el-tag v-for="tag in reply.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
|
||||
</div>
|
||||
<div class="reply-actions">
|
||||
<el-button text size="small" @click.stop="handleCopy(reply)">
|
||||
<el-icon><CopyDocument /></el-icon>
|
||||
</el-button>
|
||||
<el-button text size="small" @click.stop="handleEdit(reply)">
|
||||
<el-icon><Edit /></el-icon>
|
||||
</el-button>
|
||||
<el-button text size="small" type="danger" @click.stop="handleDelete(reply)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ChatDotRound, CopyDocument, Edit, Delete } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
interface Reply {
|
||||
id: number;
|
||||
title: string;
|
||||
content: string;
|
||||
category: string;
|
||||
tags: string[];
|
||||
usageCount: number;
|
||||
}
|
||||
|
||||
const replyList = ref<Reply[]>([
|
||||
{
|
||||
id: 1,
|
||||
title: '欢迎语',
|
||||
content: '您好！很高兴为您服务。请问有什么可以帮助您的吗？',
|
||||
category: '问候',
|
||||
tags: ['欢迎', '问候'],
|
||||
usageCount: 156,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '感谢回复',
|
||||
content: '非常感谢您的反馈！我们会继续努力为您提供更好的服务。',
|
||||
category: '感谢',
|
||||
tags: ['感谢', '反馈'],
|
||||
usageCount: 89,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '技术支持',
|
||||
content: '我已经收到您的问题，正在为您查询相关信息。请稍等片刻，我会尽快回复您。',
|
||||
category: '支持',
|
||||
tags: ['技术', '支持'],
|
||||
usageCount: 234,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '道歉回复',
|
||||
content: '非常抱歉给您带来不便。我们会立即处理这个问题，并尽快给您一个满意的答复。',
|
||||
category: '道歉',
|
||||
tags: ['道歉', '问题'],
|
||||
usageCount: 45,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '结束语',
|
||||
content: '如果您还有其他问题，随时欢迎联系我们。祝您生活愉快！',
|
||||
category: '结束',
|
||||
tags: ['结束', '祝福'],
|
||||
usageCount: 178,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '产品介绍',
|
||||
content: '我们的产品采用最新技术，为您提供高效、稳定、安全的服务体验。',
|
||||
category: '介绍',
|
||||
tags: ['产品', '介绍'],
|
||||
usageCount: 67,
|
||||
},
|
||||
]);
|
||||
|
||||
const getCategoryType = (category: string) => {
|
||||
const typeMap: Record<string, any> = {
|
||||
问候: 'success',
|
||||
感谢: 'primary',
|
||||
支持: 'warning',
|
||||
道歉: 'danger',
|
||||
结束: 'info',
|
||||
介绍: '',
|
||||
};
|
||||
return typeMap[category] || '';
|
||||
};
|
||||
|
||||
const handleReplyClick = (reply: Reply) => {
|
||||
ElMessage.success(`使用快捷回复: ${reply.title}`);
|
||||
};
|
||||
|
||||
const handleCopy = (reply: Reply) => {
|
||||
navigator.clipboard.writeText(reply.content);
|
||||
ElMessage.success('已复制到剪贴板');
|
||||
};
|
||||
|
||||
const handleEdit = (reply: Reply) => {
|
||||
ElMessage.info(`编辑回复: ${reply.title}`);
|
||||
};
|
||||
|
||||
const handleDelete = (reply: Reply) => {
|
||||
ElMessage.warning(`删除回复: ${reply.title}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.reply-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.reply-card {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e5e7eb;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.reply-category {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reply-usage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.reply-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.reply-content {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 16px 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reply-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.reply-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.reply-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user