4a105204cc
- 集成人工智能写作辅助功能，用户可在编辑器中输入提示并直接生成内容。 - 更新了用户界面组件，以提升用户体验，包括新增了一个用于发布动态的浮动操作按钮，以及改进了图片上传的布局。 - 重构了内容处理方式，以支持光标管理和动态内容插入，从而增强了编辑功能。 - 通过更新样式和响应式设计元素，改进了视觉反馈和可访问性。 此次更新旨在简化文章创建流程，并增强超级文章编辑器内的用户互动。
98 lines
4.3 KiB
Plaintext
98 lines
4.3 KiB
Plaintext
<view class="page">
|
||
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||
<view class="nav-back" bindtap="goBack">
|
||
<icon name="chevron-left" size="44" color="rgba(255,255,255,0.85)"></icon>
|
||
</view>
|
||
<text class="nav-title">{{editArticleId ? '编辑动态' : '发动态'}}</text>
|
||
<view class="nav-placeholder"></view>
|
||
</view>
|
||
<view style="height: {{statusBarHeight + 44}}px;"></view>
|
||
|
||
<!-- 主编曲面：配图 → 正文（快捷插入含 AI，点开底部弹层） -->
|
||
<view class="composer-sheet">
|
||
<view class="sheet-section">
|
||
<view class="section-head">
|
||
<text class="section-title-text">配图</text>
|
||
<text class="section-badge">{{bodyImages.length}}/9</text>
|
||
</view>
|
||
<text class="section-desc">可选 · 弹窗内「AI 帮你写」会与下方配图共用 · 发布后展示在正文下方</text>
|
||
<view class="moment-photo-grid">
|
||
<view wx:for="{{bodyImages}}" wx:key="id" class="moment-photo-cell">
|
||
<image wx:if="{{item.url}}" class="moment-photo-img" mode="aspectFill" src="{{item.url}}" />
|
||
<view wx:if="{{item.uploading}}" class="moment-photo-mask">上传中…</view>
|
||
<text class="moment-photo-remove" data-id="{{item.id}}" catchtap="removeArticleImage">×</text>
|
||
</view>
|
||
<view wx:if="{{bodyImages.length < 9}}" class="moment-photo-cell moment-photo-add" bindtap="chooseArticleImages">
|
||
<text class="moment-photo-add-plus">+</text>
|
||
</view>
|
||
</view>
|
||
<text class="hint-micro">单张建议不超 30MB</text>
|
||
</view>
|
||
|
||
<view class="section-divider"></view>
|
||
|
||
<view class="sheet-section sheet-section--body">
|
||
<view class="section-head">
|
||
<text class="section-title-text">正文</text>
|
||
<text class="section-meta">最多 5000 字</text>
|
||
</view>
|
||
<view class="inline-toolbar">
|
||
<text class="toolbar-label">快捷插入</text>
|
||
<view class="tool-btn" hover-class="tool-btn-hover" catchtap="insertMentionSelf">@自己</view>
|
||
<view wx:if="{{showAiWriteSection && !auditMode}}" class="tool-btn" hover-class="tool-btn-hover" catchtap="openAiAssist">✨ AI 帮你写</view>
|
||
</view>
|
||
<view class="textarea-wrap moment-textarea-wrap">
|
||
<textarea
|
||
class="textarea moment-textarea"
|
||
maxlength="5000"
|
||
placeholder="写点什么…支持 Markdown、多段落"
|
||
model:value="{{content}}"
|
||
bindinput="onContentInput"
|
||
bindblur="onContentBlur"
|
||
cursor="{{contentCursor}}"
|
||
disabled="{{auditMode}}"
|
||
auto-height
|
||
show-confirm-bar="{{false}}"
|
||
></textarea>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view wx:if="{{!auditMode}}" class="bottom-publish-bar">
|
||
<view class="bottom-publish-btn {{saving ? 'bottom-publish-btn-disabled' : ''}}" bindtap="submitArticle">
|
||
<text>{{saving ? (editArticleId ? '提交中…' : '发布中…') : (editArticleId ? '提交审核' : '发布')}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- AI 底部弹层 -->
|
||
<view wx:if="{{aiAssistVisible}}" class="ai-modal-root" catchtouchmove="preventMove">
|
||
<view class="ai-modal-mask" catchtap="closeAiAssist"></view>
|
||
<view class="ai-modal-panel" catchtap="noopModalTap">
|
||
<view class="ai-modal-head">
|
||
<text class="ai-modal-title">AI 帮你写</text>
|
||
<text class="ai-modal-close" catchtap="closeAiAssist">关闭</text>
|
||
</view>
|
||
<text class="ai-modal-desc">提示词 + 当前配图一并交给模型；生成后写入正文，可关闭弹窗继续编辑</text>
|
||
<text class="label-ai">提示词</text>
|
||
<view class="textarea-wrap textarea-wrap-ai">
|
||
<textarea
|
||
class="textarea prompt-textarea-inner"
|
||
maxlength="2000"
|
||
placeholder="例如：根据配图写一篇派对复盘…"
|
||
value="{{aiPrompt}}"
|
||
bindinput="onAiPromptInput"
|
||
disabled="{{auditMode}}"
|
||
show-confirm-bar="{{false}}"
|
||
></textarea>
|
||
</view>
|
||
<view class="generate-btn {{generating ? 'generate-btn-loading' : ''}}" bindtap="generateArticle">
|
||
{{generating ? '生成中…' : '生成并填入正文'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view wx:if="{{auditMode}}" class="audit-mode-mask" catchtouchmove="preventMove">
|
||
<text class="audit-mode-text">开发中...</text>
|
||
</view>
|
||
</view>
|