A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增编辑页面和分享功能，优化链接跳转和样式

Browse Source 
- 添加edit.html编辑页面及相关CSS样式
- 实现内容编辑区的富文本功能
- 为item-bottom组件添加分享功能，包括复制链接和微信转发
- 更新多个组件的链接跳转地址
- 优化CSS样式，包括圆角、阴影和hover效果
- 修复部分样式问题和布局错位
- 移除不再使用的section-index.html文件
This commit is contained in:
A1300399510
2025-11-03 00:42:30 +08:00
parent 38028167c0
commit 7bdeff17f6
51 changed files with 2414 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
edit.html Normal file
View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>发布帖子 - 轻论坛</title>
<link rel="stylesheet" href="./css/public.css" />
<link rel="stylesheet" href="./css/edit.css" />
<script src="./js/vue.global.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="container" id="edit" v-cloak>
<div class="edit-head flexacenter">
<div class="edit-head-container flexacenter">
<img class="icon" src="./img/edit-logo-icon.png" />
<div class="dot"></div>
<div class="title">发帖</div>
<div class="hint">发帖奖励 3 个寄托币/篇，每天最高奖励3篇</div>
<div class="flex1"></div>
<img v-if="userInfoWin.avatar" class="avatar" :src="userInfoWin.avatar" />
</div>
</div>
<div class="edit-container">
<!-- 标题输入 -->
<div class="title-box">
<input class="title-input" type="title" placeholder="输入标题（非必填）" v-model="info.title" :maxlength="titleLength" />
</div>
<!-- 工具栏 -->
<div class="editor-toolbar flexacenter">
<div class="toolbar-item flexacenter" @click="paragraphTitle">
<img class="icon" src="./img/t-icon.png" alt="段落标题" />
<span>段落标题</span>
</div>
<div class="toolbar-item flexacenter" @click="insertImage">
<img class="icon" src="./img/img-icon.png" alt="图片" />
<span>图片</span>
<input class="file" type="file" @change="insertImage" accept=".png, .jpg, .jpeg" />
</div>
<div class="toolbar-item flexacenter expression" :class="{'pitch': emojiState}" @click="openEmoji">
<img class="icon" src="./img/smiling-face-round-black.png" alt="表情" />
<span>表情</span>
<div class="emoji-box-mask" @click.stop="closeEmoji"></div>
<div class="emoji-box">
<div class="emoji-icon" v-for="emoji in optionEmoji" :key="emoji" @click.stop="selectEmoji(emoji)">{{ emoji }}</div>
</div>
</div>
</div>
<!-- 内容编辑区 -->
<div class="content-input" id="editor" contenteditable="true" :class="{ 'empty': isEmpty }" placeholder="输入正文" ref="editorRef" @input="onEditorInput" @focus="onEditorFocus" @blur="onEditorBlur" v-html="info.content"></div>
<!-- 标签选择 -->
<div class="tags-list flexacenter">
<div class="tag-item" v-for="item in tagList" :key="item.tagId" @click="insertLabel(item.tagId)">#{{ item.title }}</div>
</div>
<!-- 操作按钮 -->
<div class="action-buttons flexacenter">
<div class="left-section flexacenter" @click="cutAnonymity">
<img v-if="info.anonymous == 1" class="icon-pitch" src="./img/tick-box.svg" />
<div v-else class="icon"></div>
<div class="text">匿名发布</div>
</div>
<div class="right-section flexcenter">
<div class="draft-btn flexcenter" @click="submit(0)">
<img class="icon" src="./img/draft-icon.png" />
存草稿
</div>
<div class="publish-btn flexcenter" @click="submit(1)">发表帖子</div>
</div>
</div>
</div>
</div>
<script src="./js/axios.min.js"></script>
<script src="./js/public.js"></script>
<script type="module" src="./js/edit.js"></script>
</body>
</html>