ikmkj/biji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(biji-qianduan): 优化笔记预览标题样式并适配移动端

Browse Source 
- 在笔记预览标题中添加省略号效果，防止过长标题溢出
- 为移动端优化按钮样式，增加圆形按钮和调整按钮大小
- 根据屏幕大小条件
This commit is contained in:
黄孟
2025-08-08 16:53:02 +08:00
parent 924ede9e47
commit c550a34418
1 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
biji-qianduan/src/components/HomePage.vue
View File

@@ -39,22 +39,31 @@
<div v-if="selectedFile" class="file-preview">
<el-header class="preview-header">
<h2 class="preview-title">
{{ selectedFile.title }}
<span>{{ selectedFile.title }}</span>
<el-icon v-if="selectedFile.isPrivate === 1" class="lock-icon"><Lock /></el-icon>
<el-icon class="edit-icon" @click="openRenameDialog(selectedFile, 'file')"><Edit /></el-icon>
</h2>
<div class="actions">
<el-button v-if="!showEditor" type="primary" @click="selectedFile = null">返回</el-button>
<el-button v-if="!showEditor && userStore.isLoggedIn" type="warning" @click="showMoveNoteDialog = true">移动</el-button>
<el-button v-if="!showEditor && userStore.isLoggedIn" type="primary" @click="editNote(selectedFile); isCollapsed = true">编辑</el-button>
<el-button v-if="!showEditor && userStore.isLoggedIn" type="danger" @click="deleteNote(selectedFile)">删除</el-button>
<el-button v-if="!showEditor" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="primary" @click="selectedFile = null">
<el-icon v-if="isMobile"><Back /></el-icon>
<span v-else>返回</span>
</el-button>
<el-button v-if="!showEditor && userStore.isLoggedIn && !isMobile" type="warning" @click="showMoveNoteDialog = true">移动</el-button>
<el-button v-if="!showEditor && userStore.isLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="primary" @click="editNote(selectedFile); isCollapsed = true">
<el-icon v-if="isMobile"><Edit /></el-icon>
<span v-else>编辑</span>
</el-button>
<el-button v-if="!showEditor && userStore.isLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="danger" @click="deleteNote(selectedFile)">
<el-icon v-if="isMobile"><Delete /></el-icon>
<span v-else>删除</span>
</el-button>
<el-button v-if="showEditor" type="primary" @click="showEditor = !showEditor; previewFile(editData)">返回</el-button>
<el-button v-if="showEditor && userStore.isLoggedIn" type="success" @click="handleSave(vditor.getValue())">保存</el-button>
<span v-if="showEditor" class="save-status">{{ saveStatus }}</span>
<el-button v-if="!showEditor && userStore.isLoggedIn" type="info" @click="showPrivacyDialog = true">
<el-button v-if="!showEditor && userStore.isLoggedIn && !isMobile" type="info" @click="showPrivacyDialog = true">
{{ selectedFile.isPrivate === 1 ? '设为公开' : '设为私密' }}
</el-button>
<el-dropdown v-if="!showEditor && userStore.isLoggedIn" @command="handleExport">
<el-dropdown v-if="!showEditor && userStore.isLoggedIn && !isMobile" @command="handleExport">
<el-button type="success">
导出<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
@@ -337,7 +346,7 @@ import {
generateRegistrationCode,
updatePassword
} from '@/api/CommonApi.js'
import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu, User } from "@element-plus/icons-vue";
import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu, User, Back } from "@element-plus/icons-vue";
import { useUserStore } from '../stores/user';
import { useRouter } from 'vue-router';
import { privateNoteContent } from '../utils/privateNoteContent.js';
@@ -1412,6 +1421,14 @@ const resetUpdatePasswordForm = () => {
display: flex;
align-items: center;
gap: 10px;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
}
.preview-title span {
overflow: hidden;
text-overflow: ellipsis;
}
.preview-title .edit-icon {