Skip to content

Commit

Permalink
更新:完成修改帖子页面视图
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhuchunshu
zhuchunshu committed Dec 22, 2022
1 parent 0ee8608 commit 72f8388
Show file tree
Hide file tree
Showing 10 changed files with 320 additions and 171 deletions.
84 changes: 49 additions & 35 deletions app/Plugins/Core/src/Models/Post.php
View file
@@ -1,6 +1,13 @@
<?php

declare (strict_types=1);
declare(strict_types=1);
/**
* This file is part of zhuchunshu.
* @link https://github.com/zhuchunshu
* @document https://github.com/zhuchunshu/super-forum
* @contact laravel@88.com
* @license https://github.com/zhuchunshu/super-forum/blob/master/LICENSE
*/
namespace App\Plugins\Core\src\Models;

use App\Model\Model;
Expand All @@ -10,11 +17,11 @@
use Carbon\Carbon;

/**
* @property int $id
* @property string $content
* @property string $markdown
* @property string $user_agent
* @property string $user_ip
* @property int $id
* @property string $content
* @property string $markdown
* @property string $user_agent
* @property string $user_ip
* @property Carbon $created_at
* @property Carbon $updated_at
*/
Expand All @@ -26,43 +33,50 @@ class Post extends Model
* @var string
*/
protected $table = 'posts';

/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = ['id','user_id','comment_id','topic_id','content','markdown','user_agent','user_ip','created_at', 'updated_at'];
protected $fillable = ['id', 'user_id', 'comment_id', 'topic_id', 'content', 'markdown', 'user_agent', 'user_ip', 'created_at', 'updated_at'];

/**
* The attributes that should be cast to native types.
*
* @var array
*/
protected $casts = ['id' => 'integer', 'created_at' => 'datetime', 'updated_at' => 'datetime'];

/**
* 获取作者信息
* @return \Hyperf\Database\Model\Relations\BelongsTo
*/
public function user(): \Hyperf\Database\Model\Relations\BelongsTo
{
return $this->belongsTo(User::class,"user_id","id");
}

/**
* 获取所属帖子信息
* @return \Hyperf\Database\Model\Relations\BelongsTo
*/
public function topic(): \Hyperf\Database\Model\Relations\BelongsTo
{
return $this->belongsTo(Topic::class,"topic_id","id");
}

/**
* 获取所属评论信息
* @return \Hyperf\Database\Model\Relations\BelongsTo
*/
public function comments(): \Hyperf\Database\Model\Relations\BelongsTo
{
return $this->belongsTo(TopicComment::class,"comment_id","id");
}
}

/**
* 获取作者信息.
*/
public function user(): \Hyperf\Database\Model\Relations\BelongsTo
{
return $this->belongsTo(User::class, 'user_id', 'id');
}

/**
* 获取所属帖子信息.
*/
public function topic(): \Hyperf\Database\Model\Relations\BelongsTo
{
return $this->belongsTo(Topic::class, 'topic_id', 'id');
}

/**
* 获取所属评论信息.
*/
public function comments(): \Hyperf\Database\Model\Relations\BelongsTo
{
return $this->belongsTo(TopicComment::class, 'comment_id', 'id');
}

/*
* 获取options信息
*/
public function options(): \Hyperf\Database\Model\Relations\HasOne
{
return $this->hasOne(PostsOption::class, 'post_id');
}
}
20 changes: 20 additions & 0 deletions app/Plugins/Topic/bootstrap.php
View file
Expand Up @@ -246,3 +246,23 @@
Itf()->add('topic-create-editor-external_plugins', 0, [
'sfPreview' => file_hash('plugins/Topic/js/editor/plugins/sfPreview.js'),
]);


Itf()->add('topic-edit-data', 0, [
'enable' => (function () {
return true;
}),
'view' => 'Topic::edit.basis',
'scripts' => [
file_hash('plugins/Topic/js/topic.js'),
file_hash('tabler/libs/tom-select/dist/js/tom-select.base.min.js'),
file_hash('tabler/libs/tinymce/tinymce.min.js'),
],
]);

Itf()->add('topic-edit-options', 0, [
'enable' => (function () {
return true;
}),
'view' => 'Topic::edit.options.disable_comment',
]);
129 changes: 54 additions & 75 deletions app/Plugins/Topic/resources/views/edit.blade.php
View file
@@ -1,6 +1,6 @@
@extends("App::app")

@section('title', __("topic.edit topic").':'.$data['title'])
@section('title', __("topic.edit topic").':【'.$data['title']."】")

@section('header')
<div class="page-wrapper">
Expand All @@ -26,91 +26,70 @@
@endsection
@section('content')

<div id="edit-topic-vue">
<form action="" method="post" @@submit.prevent="submit">
<div class="row row-cards">
<div class="col-md-12">
<div class="mb-3 border-0 card card-body">
<h3 class="card-title">{{__("app.title")}}</h3>
<input type="text" v-model="title" class="form-control form-control-lg form-control-flush"
placeholder="{{__("topic.Please enter a title")}}" required>
<h3 class="card-title">{{__("app.tag")}}</h3>
<div class="mb-3">
<select id="select-tags" v-model="tag_selected"
class="form-select form-select-lg form-control-flush">
<option v-for="option in tags" :data-custom-properties="option.icons" :value="option.value">
@{{ option . text }}
</option>
</select>
</div>
<div class="mb-3">
<div class="row">
@if(get_options("topic_emoji_close",'false')!=="true" && count((new \App\Plugins\Core\src\Lib\Emoji())->get()))
<div class="col-lg-3">
<div class="card">
<ul class="nav nav-tabs" data-bs-toggle="tabs" style="flex-wrap: inherit;
width: 100%;
height: 3.333333rem;
padding: 0.373333rem 0.32rem 0;
box-sizing: border-box;
/* 下面是实现横向滚动的关键代码 */
display: inline;
float: left;
white-space: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch; /*解决在ios滑动不顺畅问题*/
overflow-y: hidden;">
@foreach((new \App\Plugins\Core\src\Lib\Emoji())->get() as $key => $value)
<li class="nav-item">
<a href="#emoji-list-{{$key}}" class="nav-link @if ($loop->first) active @endif" data-bs-toggle="tab">{{$key}}</a>
</li>
@endforeach
</ul>
<div class="card-body">
<div class="tab-content">
@foreach((new \App\Plugins\Core\src\Lib\Emoji())->get() as $key => $value)
<div class="tab-pane @if ($loop->first) active @endif show" id="emoji-list-{{$key}}" style="max-height: 320px;overflow-x: hidden;">
<div class="row">
@if($value['type'] === 'image')
@foreach($value['container'] as $emojis)
<div @@click="selectEmoji('{{$emojis['text']}}')" class="col-3 col-sm-2 col-md-4 col-lg-3 hvr-glow emoji-picker" emoji-data="{{$emojis['text']}}">{!! $emojis['icon'] !!}</div>
@endforeach
@endif
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div id="content-vditor"></div>
</div>
@else
<div class="col-md-12">
<div id="content-vditor"></div>
</div>
@endif
<div class="row row-cards">

<div class="col-12" id="topic-create">
<form action="/topic/update" method="POST">
<div class="row row-cards">
<div class="col-lg-9">

<div class="card">
<div class="card-header">
<h3 class="card-title">帖子信息</h3>
</div>
<div class="card-body">
@foreach(Itf()->get('topic-edit-data') as $k=>$v)
@if(call_user_func($v['enable'])===true && isset($v['view']))
@include($v['view'])
@endif
@endforeach
</div>
</div>
<div class="mb-3">
<button class="btn btn-primary">{{__("app.submit")}}</button>

</div>

<div class="col-lg-3">
<div class="card">
<div class="card-header">
<h3 class="card-title">附加信息</h3>
</div>
<div class="card-body">
<div class="row">
@foreach(Itf()->get('topic-edit-options') as $k=>$v)
@if(call_user_func($v['enable'])===true)
@include($v['view'])
@endif
@endforeach
</div>
</div>
</div>
</div>
<div class="col-12">
@csrf()
<button class="btn btn-primary" type="submit">提交</button>
</div>
</div>
</div>
</form>
</form>
</div>
</div>

@endsection

@section('scripts')
<script type="text/javascript">
var topic_id = {{$data->id}};
</script>

<script src="{{ mix('plugins/Topic/js/topic.js') }}"></script>
@foreach(Itf()->get('topic-edit-data') as $k=>$v)
@if(call_user_func($v['enable'])===true && isset($v['scripts']))
@foreach($v['scripts'] as $script)
<script src="{{$script}}" defer></script>
@endforeach
@endif
@endforeach
@foreach(Itf()->get('topic-edit-options') as $k=>$v)
@if(call_user_func($v['enable'])===true && isset($v['scripts']) && is_array($v['scripts']))
@foreach($v['scripts'] as $script)
<script src="{{$script}}" defer></script>
@endforeach
@endif
@endforeach
@endsection
@section('headers')
<link rel="stylesheet" href="{{ mix('plugins/Topic/css/app.css') }}">
Expand Down
104 changes: 104 additions & 0 deletions app/Plugins/Topic/resources/views/edit/basis.blade.php
View file
@@ -0,0 +1,104 @@
<div class="mb-3">
<label class="form-label">标题</label>
<input type="text" class="form-control" value="{{$data->title}}" name="basis[title]" placeholder="title" required>
</div>

<div class="mb-3">
<label class="form-label">选择标签</label>
<select type="text" name="basis[tag]" class="form-select" id="select-topic-tags" required>
@foreach(\App\Plugins\Topic\src\Models\TopicTag::query()->where('status','=',null)->get() as $topic_tags)
<option value="{{$topic_tags->id}}"
data-custom-properties="&lt;span class=&quot;badge&quot; style=&quot;background-color: {{$topic_tags->color}} &quot; &gt;{{$topic_tags->icon}}&lt;/span&gt;" @if($data->tag->id===$topic_tags->id){{"selected"}}@endif>
{{$topic_tags->name}}
</option>
@endforeach
</select>
</div>


<div class="mb-3">
<label class="form-label">内容正文</label>
<textarea name="basis[content]" id="basis-content" cols="30" rows="10">{!! $data->post->content !!}</textarea>
</div>

<script src="{{file_hash("js/axios.min.js")}}"></script>
<script defer>
const target = document.getElementsByTagName("html")[0]
const body_className = document.getElementsByTagName("html")[0].getAttribute("data-theme");
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (body_className !== document.getElementsByTagName("html")[0].getAttribute("data-theme")) {
location.reload()
}
});
});

observer.observe(target, {attributes: true});

const image_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
const formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
formData.append('_token', csrf_token);
axios.post("/user/upload/image",formData,{
'Content-type' : 'multipart/form-data'
}).then(function(r){
console.log(r)
const data = r.data;
if(data.success){
resolve(data.result.url);
return ;
}
reject({message:'HTTP Error: ' + data.result.msg + ', Error Code: '+data.code,remove: true});
}).catch(function(e){
console.log(e)
})

});

document.addEventListener("DOMContentLoaded", function () {
let options = {
selector: '#basis-content',
height: 450,
menu:{!! \App\Plugins\Topic\src\Lib\Editor::menu() !!},
menubar:"{!! \App\Plugins\Topic\src\Lib\Editor::menubar() !!}",
statusbar: true,
elementpath: true,
promotion: false,
plugins: {!! \App\Plugins\Topic\src\Lib\Editor::plugins() !!},
language: "zh-Hans",
toolbar: "{!! \App\Plugins\Topic\src\Lib\Editor::toolbar() !!}",
link_default_target: '_blank',
toolbar_mode: 'sliding',
image_advtab: true,
automatic_uploads: true,
convert_urls:false,
setup : function(ed) {
//console.log(ed)
},
external_plugins:{!! \App\Plugins\Topic\src\Lib\Editor::externalPlugins() !!},
images_upload_handler: image_upload_handler,
init_instance_callback: (editor) => {
@if(request()->has('restoredraft'))
editor.plugins.autosave.restoreDraft()
@endif
},
mobile:{
menu:{!! \App\Plugins\Topic\src\Lib\Editor::menu() !!},
menubar:"{!! \App\Plugins\Topic\src\Lib\Editor::menubar() !!}",
toolbar_mode: 'scrolling'
},
autosave_ask_before_unload: true,
autosave_interval: '1s',
autosave_prefix: '{{config('codefec.app.name')}}-{path}{query}-{id}-',
autosave_restore_when_empty: false,
autosave_retention: '1400m',
branding:false,
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
}
if (document.body.className === 'theme-dark') {
options.skin = 'oxide-dark';
options.content_css = 'dark';
}
tinyMCE.init(options);
});
</script>

0 comments on commit 72f8388

Please sign in to comment.