完善uniapp
This commit is contained in:
@@ -0,0 +1,247 @@
|
||||
# 记事本模块使用说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
这是一个完整的记事本应用模块，支持富文本编辑、笔记管理等功能。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
notebook/
|
||||
├── index.vue # 主页面（列表+编辑器）
|
||||
├── components/
|
||||
│ ├── edit.vue # 编辑器组件
|
||||
│ └── TiptapEditor.vue # Tiptap富文本编辑器（已全局注册）
|
||||
└── README.md # 说明文档
|
||||
```
|
||||
|
||||
## 数据库
|
||||
|
||||
### 表名
|
||||
`yz_platform_notebook`
|
||||
|
||||
### 表结构
|
||||
- `id` - 主键ID
|
||||
- `title` - 笔记标题
|
||||
- `content` - 笔记内容（HTML格式）
|
||||
- `user_id` - 创建用户ID
|
||||
- `user_name` - 创建用户名
|
||||
- `is_deleted` - 是否删除（0-否 1-是）
|
||||
- `create_time` - 创建时间
|
||||
- `update_time` - 更新时间
|
||||
- `delete_time` - 删除时间
|
||||
|
||||
### SQL文件位置
|
||||
`sql/yz_platform_notebook.sql`
|
||||
|
||||
## 后端接口
|
||||
|
||||
### 模型文件
|
||||
`go/models/platform_notebook.go`
|
||||
|
||||
### 控制器文件
|
||||
`go/controllers/platform_notebook.go`
|
||||
|
||||
### API端点
|
||||
|
||||
1. **获取笔记列表**
|
||||
- URL: `GET /platform/notebook/list`
|
||||
- 参数:
|
||||
- `page`: 页码（默认1）
|
||||
- `pageSize`: 每页数量（默认20，最大100）
|
||||
- `keyword`: 搜索关键词（可选）
|
||||
- 返回: 笔记列表和总数
|
||||
|
||||
2. **获取笔记详情**
|
||||
- URL: `GET /platform/notebook/detail/:id`
|
||||
- 参数: `id` - 笔记ID
|
||||
- 返回: 笔记详细信息
|
||||
|
||||
3. **创建笔记**
|
||||
- URL: `POST /platform/notebook/create`
|
||||
- 参数:
|
||||
```json
|
||||
{
|
||||
"title": "笔记标题",
|
||||
"content": "<p>笔记内容</p>"
|
||||
}
|
||||
```
|
||||
- 返回: 创建的笔记信息
|
||||
|
||||
4. **更新笔记**
|
||||
- URL: `POST /platform/notebook/update/:id`
|
||||
- 参数:
|
||||
```json
|
||||
{
|
||||
"title": "更新的标题",
|
||||
"content": "<p>更新的内容</p>"
|
||||
}
|
||||
```
|
||||
- 返回: 更新后的笔记信息
|
||||
|
||||
5. **删除笔记**
|
||||
- URL: `DELETE /platform/notebook/delete/:id`
|
||||
- 参数: `id` - 笔记ID
|
||||
- 返回: 删除结果
|
||||
|
||||
## 前端API
|
||||
|
||||
### API文件
|
||||
`platform/src/api/notebook.js`
|
||||
|
||||
### 方法说明
|
||||
|
||||
```javascript
|
||||
// 获取笔记列表
|
||||
getNotebookList({ page, pageSize, keyword })
|
||||
|
||||
// 获取笔记详情
|
||||
getNotebookDetail(id)
|
||||
|
||||
// 创建笔记
|
||||
createNotebook({ title, content })
|
||||
|
||||
// 更新笔记
|
||||
updateNotebook(id, { title, content })
|
||||
|
||||
// 删除笔记
|
||||
deleteNotebook(id)
|
||||
```
|
||||
|
||||
## 使用步骤
|
||||
|
||||
### 1. 初始化数据库
|
||||
```bash
|
||||
# 在MySQL中执行SQL文件
|
||||
mysql -u用户名 -p数据库名 < sql/yz_platform_notebook.sql
|
||||
```
|
||||
|
||||
### 2. 启动后端服务
|
||||
后端已自动注册模型和路由，直接启动即可：
|
||||
```bash
|
||||
cd go
|
||||
go run main.go
|
||||
```
|
||||
|
||||
### 3. 访问前端
|
||||
在浏览器中访问笔记本页面（路由需要在菜单中配置）
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 列表功能
|
||||
- ✅ 显示所有笔记
|
||||
- ✅ 搜索笔记（按标题）
|
||||
- ✅ 创建新笔记
|
||||
- ✅ 删除笔记
|
||||
- ✅ 查看笔记预览
|
||||
- ✅ 显示更新时间
|
||||
|
||||
### 编辑器功能
|
||||
- ✅ 富文本编辑（基于Tiptap）
|
||||
- ✅ 标题编辑
|
||||
- ✅ 内容编辑
|
||||
- ✅ 保存笔记
|
||||
- ✅ 自动识别新建/编辑模式
|
||||
- ✅ 加载状态显示
|
||||
|
||||
### TiptapEditor支持的功能
|
||||
- 文本样式（加粗、斜体、下划线等）
|
||||
- 标题（H1-H6）
|
||||
- 引用
|
||||
- 代码块
|
||||
- 有序/无序列表
|
||||
- 表格
|
||||
- 链接
|
||||
- 图片上传（需配置上传接口）
|
||||
- 视频嵌入
|
||||
|
||||
## 权限说明
|
||||
|
||||
- 所有接口都需要平台用户登录（JWT Token验证）
|
||||
- 每个用户只能查看、编辑、删除自己创建的笔记
|
||||
- 删除操作为软删除，数据仍保留在数据库中
|
||||
|
||||
## 扩展功能（可选）
|
||||
|
||||
如需添加以下功能，可以扩展：
|
||||
|
||||
1. **笔记分类**
|
||||
- 添加分类表和分类字段
|
||||
- 支持笔记分类管理
|
||||
|
||||
2. **笔记标签**
|
||||
- 添加标签表和关联表
|
||||
- 支持多标签筛选
|
||||
|
||||
3. **笔记分享**
|
||||
- 添加分享链接生成功能
|
||||
- 支持公开/私密设置
|
||||
|
||||
4. **笔记导出**
|
||||
- 支持导出为PDF
|
||||
- 支持导出为Markdown
|
||||
|
||||
5. **版本历史**
|
||||
- 记录笔记的修改历史
|
||||
- 支持版本回退
|
||||
|
||||
6. **协作编辑**
|
||||
- 支持多人协作编辑
|
||||
- 实时同步功能
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 图片上传需要配置文件上传接口
|
||||
2. 富文本内容存储为HTML格式，注意XSS防护
|
||||
3. 数据库content字段使用longtext类型，支持大容量内容
|
||||
4. 建议定期清理软删除的数据
|
||||
5. 生产环境建议添加内容审核机制
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **前端**: Vue 3 + Element Plus + Tiptap
|
||||
- **后端**: Go + Beego + MySQL
|
||||
- **编辑器**: Tiptap (基于ProseMirror)
|
||||
|
||||
## 开发调试
|
||||
|
||||
### 前端调试
|
||||
```bash
|
||||
cd platform
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 后端调试
|
||||
```bash
|
||||
cd go
|
||||
go run main.go
|
||||
```
|
||||
|
||||
### 查看API请求
|
||||
打开浏览器开发者工具 -> Network 标签页，查看API请求和响应
|
||||
|
||||
## 问题排查
|
||||
|
||||
1. **笔记列表为空**
|
||||
- 检查数据库表是否创建成功
|
||||
- 检查用户是否已登录
|
||||
- 查看浏览器Console是否有错误
|
||||
|
||||
2. **保存失败**
|
||||
- 检查JWT Token是否有效
|
||||
- 检查标题是否为空
|
||||
- 查看后端日志
|
||||
|
||||
3. **编辑器显示异常**
|
||||
- 检查Tiptap是否正确安装
|
||||
- 查看浏览器Console错误信息
|
||||
- 检查CSS样式是否正确加载
|
||||
|
||||
## 更新日志
|
||||
|
||||
### v1.0.0 (2024)
|
||||
- ✅ 完成基础功能
|
||||
- ✅ 支持笔记CRUD操作
|
||||
- ✅ 集成Tiptap富文本编辑器
|
||||
- ✅ 响应式设计支持
|
||||
- ✅ 暗色模式支持
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="note-editor-container">
|
||||
<div class="editor-header">
|
||||
<el-input
|
||||
v-model="noteTitle"
|
||||
placeholder="请输入标题..."
|
||||
class="title-input"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<div class="editor-actions">
|
||||
<el-button type="primary" :loading="loading" @click="handleSave">
|
||||
<el-icon><DocumentChecked /></el-icon>
|
||||
{{ isNew ? '创建' : '保存' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-body">
|
||||
<TiptapEditor v-model="noteContent" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { DocumentChecked } from '@element-plus/icons-vue';
|
||||
import { getNotebookDetail, createNotebook, updateNotebook } from '@/api/notebook';
|
||||
|
||||
const props = defineProps({
|
||||
noteId: {
|
||||
type: [Number, String],
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['save-success', 'create-success']);
|
||||
|
||||
const noteTitle = ref('');
|
||||
const noteContent = ref('');
|
||||
const loading = ref(false);
|
||||
const isNew = ref(false);
|
||||
|
||||
// 加载笔记数据
|
||||
const loadNote = async () => {
|
||||
if (props.noteId === 'new') {
|
||||
isNew.value = true;
|
||||
noteTitle.value = '新建笔记';
|
||||
noteContent.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
isNew.value = false;
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const response = await getNotebookDetail(props.noteId);
|
||||
if (response.code === 200) {
|
||||
noteTitle.value = response.data.title || '无标题';
|
||||
noteContent.value = response.data.content || '';
|
||||
} else {
|
||||
ElMessage.error('加载笔记失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载笔记失败:', error);
|
||||
ElMessage.error('加载笔记失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 保存笔记
|
||||
const handleSave = async () => {
|
||||
if (!noteTitle.value.trim()) {
|
||||
ElMessage.warning('请输入标题');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
if (isNew.value) {
|
||||
// 创建新笔记
|
||||
const response = await createNotebook({
|
||||
title: noteTitle.value,
|
||||
content: noteContent.value,
|
||||
});
|
||||
|
||||
if (response.code === 200) {
|
||||
ElMessage.success('创建成功');
|
||||
isNew.value = false;
|
||||
emit('create-success', response.data.id);
|
||||
} else {
|
||||
ElMessage.error(response.msg || '创建失败');
|
||||
}
|
||||
} else {
|
||||
// 更新现有笔记
|
||||
const response = await updateNotebook(props.noteId, {
|
||||
title: noteTitle.value,
|
||||
content: noteContent.value,
|
||||
});
|
||||
|
||||
if (response.code === 200) {
|
||||
ElMessage.success('保存成功');
|
||||
emit('save-success');
|
||||
} else {
|
||||
ElMessage.error(response.msg || '保存失败');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
ElMessage.error('保存失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听笔记 ID 变化
|
||||
watch(
|
||||
() => props.noteId,
|
||||
() => {
|
||||
loadNote();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
loadNote();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.note-editor-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--el-bg-color);
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: var(--el-fill-color-light);
|
||||
|
||||
.title-input {
|
||||
flex: 1;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: var(--el-bg-color);
|
||||
box-shadow: 0 0 0 1px var(--el-border-color) inset;
|
||||
padding: 8px 12px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px var(--el-color-primary) inset;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.editor-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-body {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.tiptap-editor-wrapper) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<div class="notebook-container">
|
||||
<div class="notebook-sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h3><i class="fa-solid fa-book"></i> 我的笔记</h3>
|
||||
<el-button type="primary" size="small" @click="handleCreate">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新建笔记
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索笔记..."
|
||||
:prefix-icon="Search"
|
||||
clearable
|
||||
@input="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="notes-list">
|
||||
<div
|
||||
v-for="note in filteredNotes"
|
||||
:key="note.id"
|
||||
:class="['note-item', { active: currentNoteId === note.id }]"
|
||||
@click="handleSelectNote(note)"
|
||||
>
|
||||
<div class="note-item-header">
|
||||
<span class="note-title">{{ note.title || '无标题' }}</span>
|
||||
<el-dropdown trigger="click" @command="(cmd) => handleNoteAction(cmd, note)">
|
||||
<el-icon class="note-more"><MoreFilled /></el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="delete">
|
||||
<el-icon><Delete /></el-icon> 删除
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="note-preview">{{ getPreviewText(note.content) }}</div>
|
||||
<div class="note-time">{{ formatTime(note.update_time || note.create_time) }}</div>
|
||||
</div>
|
||||
|
||||
<el-empty v-if="filteredNotes.length === 0" description="暂无笔记" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notebook-editor">
|
||||
<NoteEditor
|
||||
v-if="currentNoteId"
|
||||
:key="currentNoteId"
|
||||
:note-id="currentNoteId"
|
||||
@save-success="handleSaveSuccess"
|
||||
@create-success="handleCreateSuccess"
|
||||
/>
|
||||
<div v-else class="empty-editor">
|
||||
<el-empty description="请选择或创建一个笔记" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Plus, Search, Delete, MoreFilled } from '@element-plus/icons-vue';
|
||||
import NoteEditor from './components/edit.vue';
|
||||
import { getNotebookList, deleteNotebook } from '@/api/notebook';
|
||||
|
||||
const searchKeyword = ref('');
|
||||
const currentNoteId = ref(null);
|
||||
const notes = ref([]);
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
|
||||
// 过滤后的笔记列表
|
||||
const filteredNotes = computed(() => {
|
||||
return notes.value;
|
||||
});
|
||||
|
||||
// 获取预览文本
|
||||
const getPreviewText = (html) => {
|
||||
if (!html) return '暂无内容';
|
||||
const text = html.replace(/<[^>]+>/g, '').trim();
|
||||
return text.substring(0, 60) + (text.length > 60 ? '...' : '');
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (dateStr) => {
|
||||
if (!dateStr) return '';
|
||||
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now - date;
|
||||
|
||||
const minute = 60 * 1000;
|
||||
const hour = 60 * minute;
|
||||
const day = 24 * hour;
|
||||
|
||||
if (diff < minute) {
|
||||
return '刚刚';
|
||||
} else if (diff < hour) {
|
||||
return `${Math.floor(diff / minute)} 分钟前`;
|
||||
} else if (diff < day) {
|
||||
return `${Math.floor(diff / hour)} 小时前`;
|
||||
} else if (diff < 7 * day) {
|
||||
return `${Math.floor(diff / day)} 天前`;
|
||||
} else {
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 加载笔记列表
|
||||
const loadNotes = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await getNotebookList({
|
||||
page: 1,
|
||||
pageSize: 100,
|
||||
keyword: searchKeyword.value,
|
||||
});
|
||||
|
||||
if (response.code === 200) {
|
||||
notes.value = response.data.list || [];
|
||||
total.value = response.data.total || 0;
|
||||
|
||||
// 如果有笔记且没有选中任何笔记，默认选中第一个
|
||||
if (notes.value.length > 0 && !currentNoteId.value) {
|
||||
currentNoteId.value = notes.value[0].id;
|
||||
}
|
||||
|
||||
// 如果当前选中的笔记已被删除，选中第一个
|
||||
if (currentNoteId.value && !notes.value.find(n => n.id === currentNoteId.value)) {
|
||||
currentNoteId.value = notes.value[0]?.id || null;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载笔记失败:', error);
|
||||
ElMessage.error('加载笔记失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 创建新笔记
|
||||
const handleCreate = () => {
|
||||
currentNoteId.value = 'new';
|
||||
};
|
||||
|
||||
// 选择笔记
|
||||
const handleSelectNote = (note) => {
|
||||
currentNoteId.value = note.id;
|
||||
};
|
||||
|
||||
// 搜索笔记
|
||||
const handleSearch = () => {
|
||||
loadNotes();
|
||||
};
|
||||
|
||||
// 笔记操作
|
||||
const handleNoteAction = async (command, note) => {
|
||||
if (command === 'delete') {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除这条笔记吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
|
||||
await deleteNotebook(note.id);
|
||||
ElMessage.success('删除成功');
|
||||
|
||||
// 重新加载列表
|
||||
await loadNotes();
|
||||
|
||||
// 如果删除的是当前笔记，切换到第一个
|
||||
if (currentNoteId.value === note.id) {
|
||||
currentNoteId.value = notes.value[0]?.id || null;
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除失败:', error);
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 保存成功后刷新列表
|
||||
const handleSaveSuccess = async () => {
|
||||
await loadNotes();
|
||||
};
|
||||
|
||||
// 创建成功后的回调
|
||||
const handleCreateSuccess = async (noteId) => {
|
||||
currentNoteId.value = noteId;
|
||||
await loadNotes();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadNotes();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.notebook-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 180px);
|
||||
gap: 16px;
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notebook-sidebar {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--el-bg-color-overlay);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
overflow: hidden;
|
||||
|
||||
.sidebar-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--el-fill-color-light);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.notes-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--el-border-color);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-border-color-darker);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.note-item {
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
background: var(--el-bg-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
border-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--el-color-primary-light-9);
|
||||
border-color: var(--el-color-primary);
|
||||
|
||||
.note-title {
|
||||
color: var(--el-color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.note-item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.note-title {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.note-more {
|
||||
margin-left: 8px;
|
||||
color: var(--el-text-color-secondary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.note-preview {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.note-time {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
.notebook-editor {
|
||||
flex: 1;
|
||||
background: var(--el-bg-color-overlay);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
overflow: hidden;
|
||||
|
||||
.empty-editor {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.notebook-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.notebook-sidebar {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.notebook-editor {
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user