v0.4 添加附件功能、重构编辑页面、优化样式

CHANGES.md

@@ -1,6 +1,15 @@
 ## 版本更新记录
 
-### v0.3.4 
+### v0.4 2020-04-06
+
+- 新增附件功能，可在个人中心管理附件，在文档编辑器中上传和添加附件；
+- 重构文档编辑页面布局，界面排版更加友好，涉及新建文档页面、修改文档页面、新建文档模板页面、修改文档模板页面；
+- 添加首页文集搜索功能和分页功能；
+- 优化文档编辑器，重写表格组件，文档表格可以先填写内容在插入到Markdown编辑器中，预览界面a标签链接以新窗口的方式打开；；
+- 优化个人中心和后台管理文档搜索，支持文档内容和标题搜索；
+- 优化个人中心和后台管理页面、首页和文集、文档浏览页面移动端样式；
+
+### v0.3.4 2020-04-03
 
 - 添加基于用户的API模块，支持通过用户Token获取文集、新建文档和上传图片；
 - 优化文档编辑页面布局；

MrDoc/settings.py

@@ -25,7 +25,7 @@ SECRET_KEY = '5&71mt9@^58zdg*_!t(x6g14q*@84d%ptr%%s6e0l50zs0we3d'
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = False
 
-VERSIONS = '0.3.4'
+VERSIONS = '0.4'
 
 ALLOWED_HOSTS = ['*']
 

README.md

@@ -1,18 +1,12 @@
 ## MrDoc - 记录文档，汇聚思想
 
-![Mrdoc首页](./docs/mrdoc_2019080101.gif)
+![Mrdoc首页](./captrue/mrdoc-index.png)
 
 ## 介绍
 
-基于Python编写的文档写作系统，适合作为文档、知识和笔记管理工具。
+`MrDoc`是基于`Python`开发的在线文档系统，适合作为个人和小型团队的文档、知识和笔记管理工具。
 
-MarkDown快速书写，两栏式阅读布局，清晰高效浏览。
-
-当前版本为：**v0.3.4**，版本发布时间为**2020-04-03**
-
-完整更新记录详见：[CHANGES.md](./CHANGES.md)
-
-MrDoc拥有以下特点：
+### 特性：
 
 - 简洁的站点与用户系统
     - 支持用户注册、用户登录、用户管理、管理员等控制等功能；
@@ -23,14 +17,19 @@ MrDoc拥有以下特点：
     
 - 结构清晰地文档系统
     - 基于文集的文档撰写和阅读；
-    - 基于Editormd的Markdown编辑器，支持Markdown语法的文档写作，支持图片粘贴上传，支持从本地MD文件中插入内容；
+    - 使用基于`Editormd`的`Markdown`编辑器并扩展，以`Markdown`语法进行文档写作；
     - 提供文档模板功能，支持文档模板的创建、修改；
-    - 仿GitBook文档阅读页面，支持文档阅读页面的字体缩放，字体类型修改，页面社交分享，良好的移动端阅读体验；
+    - 两栏式文档阅读页面，支持文档阅读页面的字体缩放，字体类型修改，页面社交分享，良好的移动端阅读体验；
     - 支持三级目录层级显示；
-    - 支持文集后台导出为markdown文本格式.md文件、前台导出为EPUB电子书；
+    - 支持文集后台导出为`markdown`文本格式`.md`文件、前台导出为`EPUB`等格式文件；
     - 基于文集进行权限控制，提供公开、私密、指定用户可见、访问码可见4种权限模式；
-    - 支持基于账户的API接口，可以借助账户token通过API获取文集、上传图片和创建文档；
+    - 支持基于账户的`API`接口，可以借助账户`token`通过`API`获取文集、上传图片和创建文档；
     - 支持文集协作功能，一个文集可以拥有一个创建者和多个协作者，可灵活选择协作权限；
+    - 支持附件上传和管理、图片上传和管理；
+
+当前版本为：**v0.4**，版本发布时间为**2020-04-06**
+
+完整更新记录详见：[CHANGES.md](./CHANGES.md)
 
 在开发过程中，参考和借鉴了GitBook、ShowDoc、Wordbook等应用和网站的功能与样式，并使用了众多开源组件、插件。
 
@@ -103,14 +102,13 @@ python manage.py runserver
 
 ## 使用说明文档
 
-详见MrDoc使用文档:http://mrdoc.zmister.com
-
+详见MrDoc使用文档: [http://mrdoc.zmister.com](http://mrdoc.zmister.com)
 
 ## 问题提交和反馈
 
 ### 1、提交issue
 
-直接在https://gitee.com/zmister/MrDoc/issues 页面提交问题。
+直接在[https://gitee.com/zmister/MrDoc/issues](https://gitee.com/zmister/MrDoc/issues) 页面提交问题。
 
 ### 2、加入MrDoc交流群
 
@@ -119,26 +117,23 @@ python manage.py runserver
 
 ## 更多应用截图
 
-### 首页
-![MrDoc首页](./docs/mrdoc_index.jpg)
+### 文集浏览页面
+![MrDoc文集页面](./captrue/mrdoc-project-index.png)
 
-### 文集页
-![](./docs/mrdoc_project.jpg)
+### 文档阅读页面
+![MrDoc文档页](./captrue/mrdoc-doc.png)
 
-### 文档界面
-![MrDoc文档页](./docs/mrdoc_doc.jpg)
+### 文档编写页面
+![](./captrue/mrdoc-create-doc.png)
 
-### 文档编写界面
-![](./docs/mrdoc_doc_write.jpg)
+### 普通用户个人中心
+![MrDoc普通用户后台](./captrue/mrdoc-manage-project.png)
 
-### 普通用户后台界面
-![MrDoc普通用户后台](./docs/mrdoc_user.jpg)
+### 管理员后台页面
+![MrDoc管理员后台](./captrue/mrdoc-admin-register-code.png)
 
-### 管理员后台界面
-![MrDoc管理员后台](./docs/mrdoc_admin.jpg)
+### 登录页面
+![MrDoc登录页](./captrue/mrdoc-login.png)
 
-### 登录界面
-![MrDoc登录页](./docs/mrdoc_login.png)
-
-### 注册界面
-![MrDoc注册页](./docs/mrdoc_register.png)
+### 注册页面
+![MrDoc注册页](./captrue/mrdoc-register.png)

app_admin/views.py

@@ -7,6 +7,7 @@ from django.contrib.auth.decorators import login_required # 登录需求装饰
 from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage,InvalidPage # 后端分页
 from app_admin.decorators import superuser_only,open_register
 from django.core.exceptions import ObjectDoesNotExist
+from django.db.models import Q
 import json,datetime,hashlib,random
 from app_doc.models import *
 from app_admin.models import *
@@ -372,7 +373,7 @@ def admin_doc(request):
             except EmptyPage:
                 docs = paginator.page(paginator.num_pages)
         else:
-            doc_list = Doc.objects.filter(pre_content__icontains=kw).order_by('-modify_time')
+            doc_list = Doc.objects.filter(Q(content__icontains=kw) | Q(name__icontains=kw)).order_by('-modify_time')
             paginator = Paginator(doc_list, 10)
             page = request.GET.get('page', 1)
             try:

app_doc/migrations/0016_attachment.py

@@ -0,0 +1,29 @@
+# Generated by Django 2.2.11 on 2020-04-04 08:37
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('app_doc', '0015_projectcollaborator'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Attachment',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('file', models.FileField(upload_to='attachment/%Y/%m/', verbose_name='附件')),
+                ('create_time', models.DateTimeField(auto_now_add=True)),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'verbose_name': '附件管理',
+                'verbose_name_plural': '附件管理',
+            },
+        ),
+    ]

app_doc/migrations/0017_auto_20200404_0934.py

@@ -0,0 +1,28 @@
+# Generated by Django 2.2.11 on 2020-04-04 09:34
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('app_doc', '0016_attachment'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='attachment',
+            old_name='file',
+            new_name='file_path',
+        ),
+        migrations.AddField(
+            model_name='attachment',
+            name='file_name',
+            field=models.CharField(default='mrdoc_附件.zip', max_length=200, verbose_name='附件名'),
+        ),
+        migrations.AddField(
+            model_name='attachment',
+            name='file_size',
+            field=models.CharField(blank=True, max_length=100, null=True, verbose_name='附件大小'),
+        ),
+    ]

app_doc/models.py

@@ -124,4 +124,20 @@ class Image(models.Model):
 
     class Meta:
         verbose_name = '素材图片'
+        verbose_name_plural = verbose_name
+
+
+# 附件模型
+class Attachment(models.Model):
+    file_name = models.CharField(max_length=200,verbose_name="附件名",default='mrdoc_附件.zip')
+    file_size = models.CharField(max_length=100,verbose_name="附件大小",blank=True,null=True)
+    file_path = models.FileField(upload_to='attachment/%Y/%m/',verbose_name='附件')
+    user = models.ForeignKey(User,on_delete=models.CASCADE,)
+    create_time = models.DateTimeField(auto_now_add=True)
+
+    def __str__(self):
+        return self.file_name
+
+    class Meta:
+        verbose_name = '附件管理'
         verbose_name_plural = verbose_name

app_doc/urls.py

@@ -7,6 +7,7 @@ urlpatterns = [
     path('project-<int:pro_id>/', views.project_index, name='pro_index'),  # 文集浏览页
     path('create_project/', views.create_project, name='create_project'),  # 新建文集
     path('get_pro_doc/', views.get_pro_doc, name="get_pro_doc"),  # 获取某个文集的下级文档
+    path('get_pro_doc_tree/', views.get_pro_doc_tree, name="get_pro_doc_tree"),  # 获取某个文集的下级文档树数据
     path('modify_pro/',views.modify_project,name='modify_project'), # 修改文集
     path('manage_project',views.manage_project,name="manage_project"), # 管理文集
     path('del_project/',views.del_project,name='del_project'), # 删除文集
@@ -32,6 +33,7 @@ urlpatterns = [
     #################文件管理相关
     path('manage_image/',views.manage_image,name="manage_image"), # 图片管理
     path('manage_image_group/',views.manage_img_group,name="manage_img_group"), # 图片分组管理
+    path('manage_attachment/',views.manage_attachment,name='manage_attachment'), # 附件管理
     ################其他功能相关
     path('upload_doc_img/',util_upload_img.upload_img,name="upload_doc_img"), # 上传图片
 ]

app_doc/views.py

@@ -22,22 +22,80 @@ def validateTitle(title):
   new_title = re.sub(rstr, "_", title) # 替换为下划线
   return new_title
 
+
+# 文件大小 字节转换
+def sizeFormat(size, is_disk=False, precision=2):
+    '''
+    size format for human.
+        byte      ---- (B)
+        kilobyte  ---- (KB)
+        megabyte  ---- (MB)
+        gigabyte  ---- (GB)
+        terabyte  ---- (TB)
+        petabyte  ---- (PB)
+        exabyte   ---- (EB)
+        zettabyte ---- (ZB)
+        yottabyte ---- (YB)
+    '''
+    formats = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+    unit = 1000.0 if is_disk else 1024.0
+    if not(isinstance(size, float) or isinstance(size, int)):
+        raise TypeError('a float number or an integer number is required!')
+    if size < 0:
+        raise ValueError('number must be non-negative')
+    for i in formats:
+        size /= unit
+        if size < unit:
+            return f'{round(size, precision)}{i}'
+    return f'{round(size, precision)}{i}'
+
+
 # 文集列表
 def project_list(request):
-    # 登录用户
-    if request.user.is_authenticated:
-        # 用户的协作文集
-        colla_list = [i.project.id for i in ProjectCollaborator.objects.filter(user=request.user)]
-        # 查询所有可显示的文集
-        project_list = Project.objects.filter(
-            Q(role__in=[0,3]) | \
-            Q(role=2,role_value__contains=str(request.user.username)) | \
-            Q(create_user=request.user) | \
-            Q(id__in=colla_list)
-        )
+    kw = request.GET.get('kw','')
+    if kw == '':
+        # 登录用户
+        if request.user.is_authenticated:
+            # 用户的协作文集
+            colla_list = [i.project.id for i in ProjectCollaborator.objects.filter(user=request.user)]
+            # 查询所有可显示的文集
+            project_list = Project.objects.filter(
+                Q(role__in=[0,3]) | \
+                Q(role=2,role_value__contains=str(request.user.username)) | \
+                Q(create_user=request.user) | \
+                Q(id__in=colla_list)
+            )
+        else:
+            # 非登录用户只显示公开文集和需要访问码的文集
+            project_list = Project.objects.filter(role__in=[0,3])
     else:
-        # 非登录用户只显示公开文集和需要访问码的文集
-        project_list = Project.objects.filter(role__in=[0,3])
+        # 登录用户
+        if request.user.is_authenticated:
+            # 用户的协作文集
+            colla_list = [i.project.id for i in ProjectCollaborator.objects.filter(user=request.user)]
+            # 查询所有可显示的文集
+            project_list = Project.objects.filter(
+                Q(role__in=[0, 3]) | \
+                Q(role=2, role_value__contains=str(request.user.username)) | \
+                Q(create_user=request.user) | \
+                Q(id__in=colla_list),
+                Q(name__icontains=kw) | Q(intro__icontains=kw)
+            )
+        else:
+            # 非登录用户只显示公开文集和需要访问码的文集
+            project_list = Project.objects.filter(
+                Q(name__icontains=kw) | Q(intro__icontains=kw),
+                role__in=[0, 3]
+            )
+    # 分页处理
+    paginator = Paginator(project_list, 12)
+    page = request.GET.get('page', 1)
+    try:
+        projects = paginator.page(page)
+    except PageNotAnInteger:
+        projects = paginator.page(1)
+    except EmptyPage:
+        projects = paginator.page(paginator.num_pages)
     return render(request, 'app_doc/pro_list.html', locals())
 
 
@@ -124,7 +182,7 @@ def project_index(request,pro_id):
     except Exception as e:
         if settings.DEBUG:
             print(traceback.print_exc())
-        return HttpResponse('请求出错')
+        return render(request,'404.html')
 
 
 # 修改文集
@@ -272,7 +330,7 @@ def manage_project(request):
         except Exception as e:
             if settings.DEBUG:
                 print(traceback.print_exc())
-            return HttpResponse('请求出错')
+            return render(request,'404.html')
     else:
         return HttpResponse('方法不允许')
 
@@ -435,7 +493,7 @@ def doc(request,pro_id,doc_id):
     except Exception as e:
         if settings.DEBUG:
             print(traceback.print_exc())
-        return HttpResponse('请求出错')
+        return render(request,'404.html')
 
 
 # 创建文档
@@ -451,7 +509,7 @@ def create_doc(request):
         except Exception as e:
             if settings.DEBUG:
                 print(traceback.print_exc())
-            return HttpResponse('请求出错')
+            return render(request,'404.html')
     elif request.method == 'POST':
         try:
             project = request.POST.get('project','')
@@ -507,7 +565,7 @@ def modify_doc(request,doc_id):
         except Exception as e:
             if settings.DEBUG:
                 print(traceback.print_exc())
-            return HttpResponse('请求出错')
+            return render(request,'404.html')
     elif request.method == 'POST':
         try:
             doc_id = request.POST.get('doc_id','') # 文档ID
@@ -596,8 +654,8 @@ def manage_doc(request):
             # 查询文档
             if doc_status == 'all':
                 doc_list = Doc.objects.filter(
+                    Q(content__icontains=search_kw) | Q(name__icontains=search_kw),  # 文本或文档标题包含搜索词
                     create_user=request.user,
-                    content__icontains=search_kw
                 ).order_by('-modify_time')
             elif doc_status == 'published':
                 doc_list = Doc.objects.filter(
@@ -607,12 +665,12 @@ def manage_doc(request):
                 ).order_by('-modify_time')
             elif doc_status == 'draft':
                 doc_list = Doc.objects.filter(
+                    Q(content__icontains=search_kw) | Q(name__icontains=search_kw), # 文本或文档标题包含搜索词
                     create_user=request.user,
-                    content__icontains=search_kw,
                     status = 0
                 ).order_by('-modify_time')
             # 分页处理
-            paginator = Paginator(doc_list, 20)
+            paginator = Paginator(doc_list, 15)
             page = request.GET.get('page', 1)
             try:
                 docs = paginator.page(page)
@@ -654,7 +712,7 @@ def manage_doc(request):
             else:
                 doc_list = Doc.objects.filter(create_user=request.user).order_by('-modify_time')
             # 分页处理
-            paginator = Paginator(doc_list, 20)
+            paginator = Paginator(doc_list, 15)
             page = request.GET.get('page', 1)
             try:
                 docs = paginator.page(page)
@@ -672,6 +730,7 @@ def manage_doc(request):
 @login_required()
 def create_doctemp(request):
     if request.method == 'GET':
+        doctemps = DocTemp.objects.filter(create_user=request.user)
         return render(request,'app_doc/create_doctemp.html',locals())
     elif request.method == 'POST':
         try:
@@ -702,13 +761,14 @@ def modify_doctemp(request,doctemp_id):
         try:
             doctemp = DocTemp.objects.get(id=doctemp_id)
             if request.user.id == doctemp.create_user.id:
+                doctemps = DocTemp.objects.filter(create_user=request.user)
                 return render(request,'app_doc/modify_doctemp.html',locals())
             else:
                 return HttpResponse('非法请求')
         except Exception as e:
             if settings.DEBUG:
                 print(traceback.print_exc())
-            return HttpResponse('请求出错')
+            return render(request, '404.html')
     elif request.method == 'POST':
         try:
             doctemp_id = request.POST.get('doctemp_id','')
@@ -784,7 +844,7 @@ def manage_doctemp(request):
         except Exception as e:
             if settings.DEBUG:
                 print(traceback.print_exc())
-            return HttpResponse('请求出错')
+            return render(request, '404.html')
     else:
         return HttpResponse('方法不允许')
 
@@ -844,6 +904,56 @@ def get_pro_doc(request):
     else:
         return JsonResponse({'status':False,'data':'方法错误'})
 
+# 获取指定文集的文档树数据
+@login_required()
+@require_http_methods(['POST'])
+def get_pro_doc_tree(request):
+    pro_id = request.POST.get('pro_id', None)
+    if pro_id:
+        # 获取一级文档
+        doc_list = []
+        top_docs = Doc.objects.filter(top_doc=pro_id,parent_doc=0,status=1).order_by('sort')
+        for doc in top_docs:
+            top_item = {
+                'id':doc.id,
+                'field':doc.name,
+                'title':doc.name,
+                'spread':True,
+                'level':1
+            }
+            # 获取二级文档
+            sec_docs = Doc.objects.filter(top_doc=pro_id,parent_doc=doc.id,status=1).order_by('sort')
+            if sec_docs.exists():# 二级文档
+                top_item['children'] = []
+                for doc in sec_docs:
+                    sec_item = {
+                        'id': doc.id,
+                        'field': doc.name,
+                        'title': doc.name,
+                        'level':2
+                    }
+                    # 获取三级文档
+                    thr_docs = Doc.objects.filter(top_doc=pro_id,parent_doc=doc.id,status=1).order_by('sort')
+                    if thr_docs.exists():
+                        sec_item['children'] = []
+                        for doc in thr_docs:
+                            item = {
+                                'id': doc.id,
+                                'field': doc.name,
+                                'title': doc.name,
+                                'level': 3
+                            }
+                            sec_item['children'].append(item)
+                        top_item['children'].append(sec_item)
+                    else:
+                        top_item['children'].append(sec_item)
+                doc_list.append(top_item)
+            else:
+                doc_list.append(top_item)
+        return JsonResponse({'status':True,'data':doc_list})
+    else:
+        return JsonResponse({'status':False,'data':'参数错误'})
+
 
 # 404页面
 def handle_404(request):
@@ -1062,4 +1172,79 @@ def manage_img_group(request):
             except:
                 if settings.DEBUG:
                     print(traceback.print_exc())
-                return JsonResponse({'status':False,'data':'出现错误'})
+                return JsonResponse({'status':False,'data':'出现错误'})
+
+
+# 附件管理
+@login_required()
+def manage_attachment(request):
+    if request.method == 'GET':
+        try:
+            search_kw = request.GET.get('kw', None)
+            if search_kw:
+                attachment_list = Attachment.objects.filter(user=request.user,file_name__icontains=search_kw)
+                paginator = Paginator(attachment_list, 15)
+                page = request.GET.get('page', 1)
+                try:
+                    attachments = paginator.page(page)
+                except PageNotAnInteger:
+                    attachments = paginator.page(1)
+                except EmptyPage:
+                    attachments = paginator.page(paginator.num_pages)
+                attachments.kw = search_kw
+            else:
+                attachment_list = Attachment.objects.filter(user=request.user)
+                paginator = Paginator(attachment_list, 15)
+                page = request.GET.get('page', 1)
+                try:
+                    attachments = paginator.page(page)
+                except PageNotAnInteger:
+                    attachments = paginator.page(1)
+                except EmptyPage:
+                    attachments = paginator.page(paginator.num_pages)
+            return render(request, 'app_doc/manage_attachment.html', locals())
+        except Exception as e:
+            if settings.DEBUG:
+                print(traceback.print_exc())
+            return render(request,'404.html')
+    elif request.method == 'POST':
+        # types参数，0表示上传、1表示删除、2表示获取附件列表
+        types = request.POST.get('types','')
+        if types in ['0',0]:
+            attachment = request.FILES.get('attachment_upload',None)
+            if attachment:
+                attachment_name = attachment.name
+                attachment_size = sizeFormat(attachment.size)
+                if attachment_name.endswith('.zip'):
+                    a = Attachment.objects.create(
+                        file_name = attachment_name,
+                        file_size = attachment_size,
+                        file_path = attachment,
+                        user = request.user
+                    )
+                    return JsonResponse({'status':True,'data':{'name':attachment_name,'url':a.file_path.name}})
+                else:
+                    return JsonResponse({'status':False,'data':'不支持的格式'})
+            else:
+                return JsonResponse({'status':False,'data':'无效文件'})
+        elif types in ['1',1]:
+            attach_id = request.POST.get('attach_id','')
+            attachment = Attachment.objects.filter(id=attach_id,user=request.user) # 查询附件
+            for a in attachment: # 遍历附件
+                a.file_path.delete() # 删除文件
+            attachment.delete() # 删除数据库记录
+            return JsonResponse({'status':True,'data':'删除成功'})
+        elif types in [2,'2']:
+            attachment_list = []
+            attachments = Attachment.objects.filter(user=request.user)
+            for a in attachments:
+                item = {
+                    'filename':a.file_name,
+                    'filesize':a.file_size,
+                    'filepath':a.file_path.name,
+                    'filetime':a.create_time
+                }
+                attachment_list.append(item)
+            return JsonResponse({'status':True,'data':attachment_list})
+        else:
+            return JsonResponse({'status':False,'data':'无效参数'})

static/mrdoc.css

@@ -14,6 +14,7 @@
     position: absolute;
     left: 20px;
     top: 16px;
+    color:black;
 }
 .logo img {
     /*width: 85px;*/
@@ -49,10 +50,11 @@
 
 .project-item{
     /*float: left;*/
-    /*width: 200px;*/
+    width: 350px;
     height: 170px;
-    margin-top: 20px;
-    margin-left: 20px;
+    /*margin-top: 20px;*/
+    /*margin-left: 20px;*/
+    margin:10px;
     border: 1px solid #ddd;
     border-radius: 4px;
     box-shadow: 0 1px 3px rgba(0,0,0,.055);
@@ -140,10 +142,10 @@
 }
 .create-doc-form{
     margin-top: 20px;
-    margin-bottom: 20px;
+    /*margin-bottom: 20px;*/
 }
 .doc-form-label{
-    margin-left: 10px;
+    /*margin-left: 10px;*/
     /*margin-right: 10px;*/
 }
 /* 文档浏览页 */
@@ -250,7 +252,7 @@ body, html {
     text-decoration: underline;
 }
 li.active > a,li.active > div > a{
-  color: #008cff;
+  color: #1E9FFF;
 }
 .bq a {
     padding: 15px;
@@ -365,6 +367,21 @@ li.active > a,li.active > div > a{
 
 /* 移动端小屏幕样式 */
 @media screen and (max-width:768px){
+    /* 首页 */
+    .project-item{
+        width: 100%;
+        height: 170px;
+        margin:10px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        box-shadow: 0 1px 3px rgba(0,0,0,.055);
+    }
+    .layui-container{
+        padding:0 5px;
+    }
+    .layui-fluid{
+        padding: 0 25px;
+    }
     /* 文档浏览页 顶部控制按钮 */
     .doc-header .btn{
         padding:0 10px;

static/mrdoc.editor.js

@@ -0,0 +1,190 @@
+function InsertLine(obj) {
+  var table_id = "#" + $(obj).attr("name");
+  var name = $(obj).attr("name");
+  var count = $(obj).parent().prevAll().length - 1;
+  console.log(count);
+  $(obj).parent().parent().after(linebody(count, name));
+  for (var i = 1; i < $(table_id).find("tr").length; i++) {
+      var Lnum = i + "#";
+      $(table_id).find("tr").eq(i).find("td").eq(0).html(Lnum);
+  }
+}
+
+function linebody(count, name) {
+  var body = "<tr><td></td>";
+  for (var i = 0; i < count; i++) {
+      body += "<td><div contenteditable='true'></div></td>";
+  }
+
+  body += "<td><img src='/static/mrdoc-editor/add.gif' name='" + name + "' style='cursor: pointer' onclick='InsertLine(this)'>" +
+      "<img src='/static/mrdoc-editor/delete.gif'  name='" + name + "' style='cursor: pointer' onclick='DeleteLine(this)'></td>";
+  body += "</tr>";
+
+  return body;
+}
+
+function DeleteLine(obj) {
+  var table_id = "#" + $(obj).attr("name");
+  $(obj).parent().parent().remove();
+  for (var i = 1; i < $(table_id).find("tr").length; i++) {
+      var Lnum = i + "#";
+      $(table_id).find("tr").eq(i).find("td").eq(0).html(Lnum);
+  }
+}
+
+function Deleterow(obj) {
+  var table_id = "#" + $(obj).attr("name");
+  var ti = $(obj).parent().prevAll().length;
+  console.log(ti);
+  for (var i = 0; i < $(table_id).find("tr").length; i++) {
+      $(table_id).find("tr").eq(i).find("td").eq(ti).remove();
+  }
+}
+
+function Insertrow(obj) {
+  var ti = $(obj).parent().prevAll().length;
+  var table_id = "#" + $(obj).attr("name");
+  var name=$(obj).attr("name");
+  var width = $(table_id).width();
+  var td1 = "<td><div contenteditable='true' ></div></td>"
+  var td = "<td><div contenteditable='true' style='float: left;width: 70%'>列名</div><img src='/static/mrdoc-editor/delete.gif'  name='" + name + "' style='cursor: pointer' onclick='Deleterow(this)'></td>"
+  for (var i = 0; i < $(table_id).find("tr").length; i++) {
+      if (i == 0) {
+          $(table_id).find("tr").eq(i).find("td").eq(ti).before(td);
+      } else {
+          $(table_id).find("tr").eq(i).find("td").eq(ti).before(td1);
+      }
+
+  }
+  var n = $(table_id).find("tr").length;
+  width = width / n;
+  for (var i = 0; i < $(table_id).find("tr").eq(0).find("td").length - 1; i++) {
+      $(table_id).find("tr").eq(0).find("td").eq(i).width(width);
+  }
+}
+
+function addbutton() {
+  var btn = $("#TableGroup").find("table").length;
+  var button = "<input type='button' value='表格" + btn + "' name='DataTable" + btn + "' id='DataBtn" + btn + "'\n" +
+      "style='float:left' class='btn table-btn' onclick='changetable(this)'>";
+  $("#BtnGroup").append(button);
+  addtable(btn);
+  var id = "#DataBtn" + btn;
+}
+
+function addtable(btn) {
+  $("#TableGroup").empty();
+  var row = $("#row").val();
+  var col = $("#col").val();
+  var id = '#DataTable' + btn;
+  var name = 'DataTable' + btn;
+  var body = "<table id='DataTable" + btn + "'  class='layui-table' style='text-align: center'><tr>";
+  for (var i = 0; i <= col; i++) {
+      if (i == 0) {
+          body += "<td>序号</td>"
+      } else {
+          body += "<td><div contenteditable='true' style='float: left;width: 70%'>列名</div><img src='/static/mrdoc-editor/delete.gif' name='" + name + "' style='cursor: pointer' onclick='Deleterow(this)'></td>";
+
+      }
+  }
+  body += "</tr>"
+  for (var i = 1; i <= row; i++) {
+      body += "<tr>";
+      for (var j = 0; j <= col; j++) {
+          if (j == 0) {
+              body += "<td><div style='text-align: center;height: 100%'>" + i + "#</div></td>";
+          } else {
+              body += "<td><div contenteditable='true' style='text-align: center;height: 100%'></div></td>";
+          }
+      }
+      body += "</tr>";
+  }
+  body += "</table>";
+  $("#TableGroup").append(body);
+
+  addsrc(id, name);
+  $(id).siblings().hide();
+  $(id).show();
+
+}
+
+function changetable(obj) {
+  var table_id = "#" + $(obj).attr("name");
+  $(table_id).siblings().hide();
+  $(table_id).show();
+  $(obj).addClass("btn-success");
+  $(obj).siblings().removeClass("btn-success");
+}
+
+function addsrc(id, name) {
+  for (var i = 0; i < $(id).find("tr").length; i++) {
+      if (i == 0) {
+          var td = "<td class='small'><img src='/static/mrdoc-editor/add.gif' name='" + name + "' style='cursor: pointer' onclick='Insertrow(this)'></td>";
+          $(id).find("tr").eq(i).append(td);
+      } else {
+          var td = "<td><img src='/static/mrdoc-editor/add.gif' name='" + name + "' style='cursor: pointer' onclick='InsertLine(this)'>" +
+              "<img src='/static/mrdoc-editor/delete.gif' name='" + name + "' style='cursor: pointer' onclick='DeleteLine(this)'></td>";
+          $(id).find("tr").eq(i).append(td);
+      }
+
+  }
+}
+
+
+// **********HTML Table转Markdown相关js**************************** //
+
+var NL = "\n";
+
+// 转换表格 - 传入一个默认的id1
+function convertTable(id) {
+    var table = document.getElementById('DataTable1')
+    var markdownResults = '';
+    var tableElement = table;
+    var markdownTable = convertTableElementToMarkdown(tableElement);
+    markdownResults += markdownTable + NL + NL;
+    return markdownResults;
+  }
+
+function reportResult(msg) {
+  console.log(msg)
+}
+
+// 转换表格为Markdown
+function convertTableElementToMarkdown(tableEl) {
+  var rows = [];
+  // 删除每行tr的第一个和最后一个td
+  var trEls = tableEl.getElementsByTagName('tr');
+  for(var i=0; i<trEls.length; i++) {
+    var tableRow = trEls[i]; // 每一行tr
+    var markdownRow = convertTableRowElementToMarkdown(tableRow, i);
+    rows.push(markdownRow);
+  }
+  return rows.join(NL);
+}
+
+// 转换表格的行为Markdown
+function convertTableRowElementToMarkdown(tableRowEl, rowNumber) {
+  var cells = [];
+  var cellEls = tableRowEl.children; // 每一个td
+  for(var i=1; i<cellEls.length-1; i++) { // 从第二个td开始遍历，到倒数第二个td，也就是去除第一列的标识列和最后一列操作列
+    var cell = cellEls[i];
+    cells.push(cell.innerText.replace(/[\r\n]/g, '') + ' |');
+    console.log(cells)
+  }
+  var row = '| ' + cells.join(" ");
+  console.log('一行数据：')
+  console.log(row)
+  if(rowNumber == 0) {
+    row = row + NL + createMarkdownDividerRow(cellEls.length-2); // length -2 就是去除第一列和最后一列的长度
+  }
+  return row;
+}
+
+// 创建Markdown分割线
+function createMarkdownDividerRow(cellCount) {
+  var dividerCells = [];
+  for(i = 0; i<cellCount; i++) {
+    dividerCells.push('---' + ' |');
+  }
+  return '| ' + dividerCells.join(" ");
+}

template/app_admin/admin_base.html

@@ -7,8 +7,44 @@
     <link rel="icon" href="{% static 'favicon_16.png' %}"/>
     <link href="{% static 'layui/css/layui.css' %}?version={{mrdoc_version}}" rel="stylesheet">
     <style>
-        .logo img{
-            height: 30px;
+      .layui-btn a{
+            color:white;
+        }
+        /* 左侧菜单栏悬浮样式 */
+        .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover{
+          background-color: #1E9FFF !important;
+        }
+        .layui-nav-tree .layui-nav-bar{
+          background-color: #1E9FFF !important;
+        }
+        /* 顶部菜单栏悬浮样式 */
+        .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{
+          background-color: #1E9FFF !important;
+        }
+        /* 管理文档文档状态条件筛选 管理图片图片分组筛选 */
+        .doc_status_condition > a.current{
+            color: #000!important;
+        }
+        /* layui分页组件样式 */
+        .layui-laypage .layui-laypage-curr .layui-laypage-em{
+            background-color: #1E9FFF !important;
+        }
+        /* layui引用文本样式 */
+        .layui-elem-quote{
+          border-left: 5px solid #1E9FFF !important;
+        }
+        /* 设置输入框的高度 和layui-btn-sm一致 */
+        .layui-input{
+          height: 30px !important;
+        }
+        /* layui开关按钮 */
+        .layui-form-onswitch{
+          border-color: #1E9FFF;
+          background-color: #1E9FFF;
+        }
+        /* layui单选按钮 */
+        .layui-form-radio>i:hover, .layui-form-radioed>i{
+          color: #1E9FFF;
         }
     </style>
 </head>
@@ -16,8 +52,7 @@
 <div class="layui-layout layui-layout-admin">
     <div class="layui-header">
         <div class="layui-logo">
-            <a class="logo" href="{% url 'pro_list' %}">
-{#            <img src="/media/logo-white.png" />#}
+            <a class="logo" href="{% url 'pro_list' %}">  
                 <h1 style="color: white;">
                     <strong>MrDoc</strong>
                     <span style="font-size: 14px;" class="layui-badge-rim">后台管理</span>

template/app_admin/admin_doc.html

@@ -12,16 +12,16 @@
         <form action="{% url 'doc_manage' %}" method="get">
         <div class="layui-form-item">
             <div class="layui-input-inline">
-                <input type="text" name="kw" id="kw" placeholder="输入文档内容" autocomplete="off" class="layui-input">
+                <input type="text" name="kw" id="kw" placeholder="输入文档标题或内容" autocomplete="off" class="layui-input">
             </div>
-            <button class="layui-btn layui-btn-normal" type="submit">搜索</button>
-            <button class="layui-btn layui-btn-normal"><a href="{% url 'create_doc' %}" target="_blank" style="color: white;">新建文档</a></button>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" type="submit"><i class="layui-icon layui-icon-search"></i>搜索</button>
+            <a href="{% url 'create_doc' %}" target="_blank" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-addition"></i>新建文档</a>
         </div>
         </form>
     </div>
     <!-- 表格数据 -->
-    <div class="layui-row" lay-skin="line">
-        <table class="layui-table"  id="doctemp-list" lay-skin="">
+    <div class="layui-row">
+        <table class="layui-table"  id="doctemp-list" lay-skin="" lay-even>
       <thead>
         <tr>
             <th>文档名称</th>
@@ -38,11 +38,15 @@
         <tr>
             {% if doc.status == 1 %}
                 <td>
-                    <a href="{% url 'doc' doc.top_doc doc.id %}" target="_blank" title="查看文档：{{doc.name}}">{{ doc.name }} <span class="layui-badge layui-bg-black">已发布</span></a>
+                    <a href="{% url 'doc' doc.top_doc doc.id %}" target="_blank" title="查看文档：{{doc.name}}">{{ doc.name }} 
+                        <i class="layui-icon layui-icon-circle-dot" style="color: #1E9FFF;"></i>
+                    </a>
                 </td>
             {% else %}
                 <td>
-                    <a href="{% url 'modify_doc' doc.id %}" target="_blank" title="修改文档：{{doc.name}}">{{ doc.name }} <span class="layui-badge">草稿</span></a>
+                    <a href="{% url 'modify_doc' doc.id %}" target="_blank" title="修改文档：{{doc.name}}">{{ doc.name }} 
+                        <i class="layui-icon layui-icon-circle-dot" style="color: #FF5722;"></i>
+                    </a>
                 </td>
             {% endif %}
             <td>{{ doc.parent_doc|get_doc_parent }}</td>
@@ -50,8 +54,12 @@
             <td>{{ doc.create_user }}</td>
           <td>{{ doc.create_time }}</td>
           <td>
-              <a href="{% url 'modify_doc' doc_id=doc.id %}" target="_blank" class="layui-btn layui-btn-warm layui-btn-xs">修改</a>
-              <a href="javascript:void(0);" onclick="delDoc('{{doc.id}}');" class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
+              <a href="{% url 'modify_doc' doc_id=doc.id %}" target="_blank" class="layui-btn layui-btn-normal layui-btn-xs">
+                  <i class="layui-icon layui-icon-edit"></i>修改
+                </a>
+              <a href="javascript:void(0);" onclick="delDoc('{{doc.id}}');" class="layui-btn layui-btn-danger layui-btn-xs">
+                <i class="layui-icon layui-icon-delete"></i>删除
+            </a>
           </td>
         </tr>
         {% endfor %}
@@ -60,18 +68,24 @@
     </div>
     <!-- 分页 -->
     <div class="layui-row">
-        <div class="pagination">
-            <span class="step-links">
+        <div class="layui-box layui-laypage layui-laypage-default">
+                <!-- 上一页 -->
                 {% if docs.has_previous %}
-                    <a href="?page={{ docs.previous_page_number }}&kw={{docs.kw}}" class="layui-btn layui-btn-normal layui-btn-xs">上一页</a>
+                    <a href="?page={{ docs.previous_page_number }}&kw={{docs.kw}}&status={{docs.status}}" class="layui-btn layui-btn-xs layui-btn-normal">上一页</a>
+                {% else %}
+                    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">上一页</a>
                 {% endif %}
-                <span class="current">
-                    当前页： {{ docs.number }} 共 {{ docs.paginator.num_pages }} 页
+                <!-- 当前页 -->
+                <span class="layui-laypage-curr">
+                    <em class="layui-laypage-em"></em>
+                    <em>{{ docs.number }}/{{ docs.paginator.num_pages }}</em>
                 </span>
+                <!-- 下一页 -->
                 {% if docs.has_next %}
-                    <a href="?page={{ docs.next_page_number }}&kw={{docs.kw}}" class="layui-btn layui-btn-xs">下一页</a>
+                    <a href="?page={{ docs.next_page_number }}&kw={{docs.kw}}&status={{docs.status}}" class="layui-btn layui-btn-xs layui-btn-normal">下一页</a>
+                {% else %}
+                    <a class="layui-btn layui-btn-xs layui-btn-disabled">下一页</a>
                 {% endif %}
-            </span>
         </div>
     </div>
 {% endblock %}

template/app_admin/admin_doctemp.html

@@ -14,13 +14,13 @@
             <div class="layui-input-inline">
                 <input type="text" name="kw" id="kw"  placeholder="输入文档模板内容" autocomplete="off" class="layui-input">
             </div>
-            <button class="layui-btn layui-btn-normal" type="submit">搜索</button>
-            <button class="layui-btn layui-btn-normal" type="button"><a href="{% url 'create_doctemp' %}" target="_blank" style="color: white;">新建文档模板</a></button>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" type="submit"><i class="layui-icon layui-icon-search"></i>搜索</button>
+            <a href="{% url 'create_doctemp' %}" target="_blank" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-addition"></i>新建文档模板</a>
         </div>
         </form>
     </div>
-    <div class="layui-row" lay-skin="line">
-        <table class="layui-table"  id="doctemp-list" lay-skin="">
+    <div class="layui-row">
+        <table class="layui-table"  id="doctemp-list" lay-skin="" lay-even>
             <colgroup>
             <col width="200">
             <col width="200">
@@ -41,28 +41,38 @@
             <td>{{ temp.create_user }}</td>
           <td>{{ temp.create_time }}</td>
           <td>
-              <a href="{% url 'modify_doctemp' doctemp_id=temp.id %}" target="_blank" class="layui-btn layui-btn-warm layui-btn-xs">修改</a>
-              <a href="javascript:void(0);" onclick="delTemp('{{temp.id}}');" class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
+              <a href="{% url 'modify_doctemp' doctemp_id=temp.id %}" target="_blank" class="layui-btn layui-btn-normal layui-btn-xs">
+                <i class="layui-icon layui-icon-edit"></i>修改
+                </a>
+              <a href="javascript:void(0);" onclick="delTemp('{{temp.id}}');" class="layui-btn layui-btn-danger layui-btn-xs">
+                <i class="layui-icon layui-icon-delete"></i>删除
+            </a>
           </td>
         </tr>
         {% endfor %}
       </tbody>
         </table>
     </div>
-        <!-- 分页 -->
+    <!-- 分页 -->
     <div class="layui-row">
-        <div class="pagination">
-            <span class="step-links">
+        <div class="layui-box layui-laypage layui-laypage-default">
+                <!-- 上一页 -->
                 {% if doctemps.has_previous %}
-                    <a href="?page={{ doctemps.previous_page_number }}&kw={{doctemps.kw}}" class="layui-btn layui-btn-normal layui-btn-xs">上一页</a>
+                    <a href="?page={{ doctemps.previous_page_number }}&kw={{doctemps.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">上一页</a>
+                {% else %}
+                    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">上一页</a>
                 {% endif %}
-                <span class="current">
-                    当前页： {{ doctemps.number }} 共 {{ doctemps.paginator.num_pages }} 页
+                <!-- 当前页 -->
+                <span class="layui-laypage-curr">
+                    <em class="layui-laypage-em"></em>
+                    <em>{{ doctemps.number }}/{{ doctemps.paginator.num_pages }}</em>
                 </span>
+                <!-- 下一页 -->
                 {% if doctemps.has_next %}
-                    <a href="?page={{ doctemps.next_page_number }}&kw={{doctemps.kw}}" class="layui-btn layui-btn-xs">下一页</a>
+                    <a href="?page={{ doctemps.next_page_number }}&kw={{doctemps.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">下一页</a>
+                {% else %}
+                    <a class="layui-btn layui-btn-xs layui-btn-disabled">下一页</a>
                 {% endif %}
-            </span>
         </div>
     </div>
 {% endblock %}

template/app_admin/admin_project.html

@@ -14,16 +14,16 @@
             <div class="layui-input-inline">
                 <input type="text" name="kw" id="kw" placeholder="输入文集内容" autocomplete="off" class="layui-input">
             </div>
-            <button class="layui-btn layui-btn-normal" type="submit">搜索</button>
-            <button class="layui-btn layui-btn-normal" onclick="createProject()" type="button">新建文集</button>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" type="submit"><i class="layui-icon layui-icon-search"></i>搜索</button>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="createProject()" type="button"><i class="layui-icon layui-icon-addition"></i>新建文集</button>
         </div>
         </form>
     </div>
-    <div class="layui-row" lay-skin="line">
-        <table class="layui-table"  id="doctemp-list" lay-skin="">
+    <div class="layui-row" >
+        <table class="layui-table"  id="doctemp-list" lay-skin="" lay-size='sm' lay-even>
             <colgroup>
                 <col width="100">
-                <col width="300">
+                <col width="200">
                 <col width="40">
                 <col width="50">
                 <col width="100">
@@ -64,9 +64,15 @@
           <td>{{ pro.create_time }}</td>
           <td>{{ pro.create_user }}</td>
           <td>
-              <a href="{% url 'pro_index' pro_id=pro.id %}"  target="_blank" class="layui-btn layui-btn-normal layui-btn-xs">查看</a>
-              <a href="javascript:void(0);" onclick="modifyProject('{{pro.id}}','{{pro.name}}','{{pro.intro}}')" class="layui-btn layui-btn-warm layui-btn-xs">修改</a>
-              <a href="javascript:void(0);" onclick="delProject('{{pro.id}}');" class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
+              <a href="{% url 'pro_index' pro_id=pro.id %}"  target="_blank" class="layui-btn layui-btn-normal layui-btn-xs">
+                  <i class="layui-icon layui-icon-read"></i>查看
+                </a>
+              <a href="javascript:void(0);" onclick="modifyProject('{{pro.id}}','{{pro.name}}','{{pro.intro}}')" class="layui-btn layui-btn-normal layui-btn-xs">
+                <i class="layui-icon layui-icon-edit"></i>修改
+            </a>
+              <a href="javascript:void(0);" onclick="delProject('{{pro.id}}');" class="layui-btn layui-btn-danger layui-btn-xs">
+                <i class="layui-icon layui-icon-delete"></i>删除
+            </a>
           </td>
         </tr>
         {% endfor %}
@@ -75,18 +81,24 @@
     </div>
     <!-- 分页 -->
     <div class="layui-row">
-        <div class="pagination">
-            <span class="step-links">
+        <div class="layui-box layui-laypage layui-laypage-default">
+                <!-- 上一页 -->
                 {% if projects.has_previous %}
-                    <a href="?page={{ projects.previous_page_number }}&kw={{projects.kw}}" class="layui-btn layui-btn-normal layui-btn-xs">上一页</a>
+                    <a href="?page={{ projects.previous_page_number }}&kw={{projects.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">上一页</a>
+                {% else %}
+                    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">上一页</a>
                 {% endif %}
-                <span class="current">
-                    当前页： {{ projects.number }} 共 {{ projects.paginator.num_pages }} 页
+                <!-- 当前页 -->
+                <span class="layui-laypage-curr">
+                    <em class="layui-laypage-em"></em>
+                    <em>{{ projects.number }}/{{ projects.paginator.num_pages }}</em>
                 </span>
+                <!-- 下一页 -->
                 {% if projects.has_next %}
-                    <a href="?page={{ projects.next_page_number }}&kw={{projects.kw}}" class="layui-btn layui-btn-xs">下一页</a>
+                    <a href="?page={{ projects.next_page_number }}&kw={{projects.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">下一页</a>
+                {% else %}
+                    <a class="layui-btn layui-btn-xs layui-btn-disabled">下一页</a>
                 {% endif %}
-            </span>
         </div>
     </div>
 {% endblock %}

template/app_admin/admin_project_role.html

@@ -64,7 +64,7 @@
 
             <div class="layui-form-item">
                 <div class="layui-input-block">
-                  <button class="layui-btn" lay-submit lay-filter="formDemo">立即修改</button>
+                  <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="formDemo">立即修改</button>
                 </div>
             </div>
         </form>

template/app_admin/admin_register_code.html

@@ -15,7 +15,7 @@
                 <!--<input type="text" name="kw" id="kw" placeholder="输入文集内容" autocomplete="off" class="layui-input">-->
             <!--</div>-->
             <!--<button class="layui-btn layui-btn-normal" type="submit">搜索</button>-->
-            <button class="layui-btn layui-btn-normal" onclick="createRegisterCode()" type="button"><i class="layui-icon layui-icon-addition"></i>新增注册码</button>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="createRegisterCode()" type="button"><i class="layui-icon layui-icon-addition"></i>新增注册码</button>
         </div>
         </form>
     </div>
@@ -65,7 +65,9 @@
           <td>{{ code.create_time }}</td>
           <td>{{ code.create_user }}</td>
           <td>
-              <a href="javascript:void(0);" onclick="delRegisterCode('{{code.id}}')" class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
+              <a href="javascript:void(0);" onclick="delRegisterCode('{{code.id}}')" class="layui-btn layui-btn-danger layui-btn-xs">
+                <i class="layui-icon layui-icon-delete"></i>删除
+            </a>
           </td>
         </tr>
         {% endfor %}

template/app_admin/admin_setting.html

@@ -69,7 +69,7 @@
 
                   <div class="layui-form-item">
                     <div class="layui-input-block">
-                      <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
+                      <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="formDemo">保存</button>
                     </div>
                   </div>
                 </form>
@@ -125,7 +125,7 @@
 
                   <div class="layui-form-item">
                     <div class="layui-input-block">
-                      <button class="layui-btn" lay-submit lay-filter="formDemo">保存邮箱设置</button>
+                      <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="formDemo">保存邮箱设置</button>
                     </div>
                   </div>
                 </form>

template/app_admin/admin_user.html

@@ -15,8 +15,8 @@
             <div class="layui-input-inline">
                 <input type="text" name="username" id="username" required lay-verify="required" placeholder="输入用户名" autocomplete="off" class="layui-input">
             </div>
-            <button class="layui-btn layui-btn-normal" onclick="getUserInfo()">搜索</button>
-            <button class="layui-btn layui-btn-normal" onclick="createUser()" type="button">添加用户</button>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="getUserInfo()"><i class="layui-icon layui-icon-search"></i>搜索</button>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="createUser()" type="button"><i class="layui-icon layui-icon-addition"></i>添加用户</button>
         </div>
 {#        </form>#}
     </div>

template/app_api/manage_token.html

@@ -18,8 +18,8 @@
             </div>
             <div class="layui-form-item">
                 <label class="layui-form-label">操作</label>
-                <button class="layui-btn" type="button" id="copy-token" onclick="copyToken()">复制</button>
-                <button class="layui-btn" type="button" onclick="generaToken()">重新生成Token</button>
+                <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" id="copy-token" onclick="copyToken()">复制</button>
+                <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" onclick="generaToken()">重新生成Token</button>
             </div>
         </form>
     </div><hr>

template/app_doc/create_base.html

@@ -51,6 +51,11 @@
             border-radius: 3px;
             overflow: hidden;
         }
+        /* 编辑器图标样式 */
+        .editormd-menu i{
+            color: black;
+            font-size: 20px;
+        }
     </style>
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
@@ -58,7 +63,6 @@
     <![endif]-->
     {% block custom_style %}{% endblock %}
 
-
 </head>
 <body class="layui-container">
 <!-- 页头 -->
@@ -75,6 +79,7 @@
 <script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
 <script src="{% static 'layui/layui.all.js' %}"></script>
 <script src="{% static 'editor.md/editormd.min.js' %}"></script>
+<script src="{% static 'mrdoc.editor.js' %}"></script>
 <script>
     $.ajaxSetup({
             data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
@@ -93,9 +98,9 @@
             return [
                 "undo", "redo", "|",
                 "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase","kaiSpan", "|",
-                "h1", "h2", "h3", "h4", "h5", "h6", "|",
-                "list-ul", "list-ol", "hr", "|",
-                "link", "reference-link","imgUpload", "code", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|",
+                "h1", "h2", "h3", "h4", "|",
+                "list-ul", "list-ol", "hr", "link", "reference-link", "|",
+                "imgUpload", "attachment" ,"code", "code-block", "htmltable", "datetime", "emoji", "html-entities", "pagebreak", "|",
                 "watch", "preview", "|",
                 "help"
             ]
@@ -103,11 +108,12 @@
         //自定义工具栏添加楷体按钮
         toolbarIconTexts : {
             kaiSpan : "楷",
-            imgUpload:'fa-image',
         },
         //自定义工具栏添加图片按钮
         toolbarIconsClass : {
             imgUpload:'fa-image',
+            attachment:'fa-file-zip-o',
+            htmltable:'fa-table',
         },
         //设置自定义工具栏按钮的事件
         toolbarHandlers : {
@@ -117,6 +123,7 @@
              * @param {Object}      cursor     CodeMirror的光标对象，可获取光标所在行和位置
              * @param {String}      selection  编辑器选中的文本
              */
+             // 点击“楷”字图标的响应函数
             kaiSpan : function(cm, icon, cursor, selection) {
                 //var cursor    = cm.getCursor();     //获取当前光标对象，同cursor参数
                 //var selection = cm.getSelection();  //获取当前选中的文本，同selection参数
@@ -141,6 +148,76 @@
                     id:'uploadImg',//配置ID,
                     content:$('#upload-img'),
                 })
+            },
+            //点击工具栏文件按钮的响应函数 - 上传和选择附件
+            attachment : function(cm,icon,cursor,selection){
+                layer.ready(function(){
+                  element.init();
+                });
+                layer.open({
+                    type:'1',
+                    title:'添加附件',
+                    area:['800px','600px'],
+                    id:'uploadAttach',//配置ID,
+                    content:$('#upload-attach'),
+                    success: function(layero, index){
+                        $.post('{% url "manage_attachment" %}',{types:2},function(r){
+                            $("#attach_table tbody").empty()
+                            if(r.status){
+                                // $.each(r.data,function(k,v){
+                                //     console.log(k,v)
+                                //     var row = "<tr><td>" + v.filename + "</td><td>"+ v.filesize +"</td><td>"+ v.filetime +"</td><td><button class='layui-btn layui-btn-normal' data-name='"+ v.filename +"'  data-path='"+ v.filepath +"' onclick='insertAttach(this)'>选择</button></td></tr>"
+                                //     $("#attach_table tbody").append(row)
+                                // })
+                                //调用分页显示
+                                laypage.render({
+                                    elem: 'select-attach-page',//分页的div
+                                    count: r.data.length, //数据总数
+                                    limit:10, //单页数
+                                    jump: function(obj){
+                                        //渲染HTML
+                                        $("#attach_table tbody").empty();
+                                        var thisData = r.data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
+                                        layui.each(thisData, function(k, v){
+                                            var row = "<tr><td>" + v.filename + "</td><td>"+ v.filesize +"</td><td>"+ v.filetime +"</td><td><button class='layui-btn layui-btn-normal' data-name='"+ v.filename +"'  data-path='"+ v.filepath +"' onclick='insertAttach(this)'>选择</button></td></tr>"
+                                            // arr.push(row);
+                                            $("#attach_table tbody").append(row)
+                                        });
+                                    }
+                                });
+                                //layer.close(loading);//关闭加载提示
+                            }else{
+                                layer.msg("获取附件失败，请稍后重试！")
+                            }
+                        })
+
+                    }
+                })
+            },
+            //点击工具栏表格按钮的响应函数 - 添加表格
+            htmltable:function(cm,icon,cursor,selection){
+                layer.ready(function(){
+                  element.init();
+                });
+                layer.open({
+                    type:1,
+                    id:'addTable',
+                    title:'添加表格',
+                    //content:"<div style='margin:10px;'><input type='number' id='row' class='layui-input' placeholder='输入行数'><input type='number' id='col' class='layui-input' placeholder='输入列数'></div>",
+                    content:$("#layer-table"),
+                    btn:['确定','取消'], //添加按钮
+                    yes:function(index,layero){
+                        var table_md = convertTable("DataTable1")
+                        //console.log(table_md)
+                        editor.insertValue("\n" + table_md);
+                        $("#TableGroup").empty();//清空表格
+                        layer.close(index)
+                    },
+                    btn2:function(index,layero){
+                        $("#TableGroup").empty();//清空表格
+                        layer.close(index) // 关闭弹出框
+                    }
+                });
             }
         },
         //设置语言
@@ -148,6 +225,8 @@
             toolbar : {
                 kaiSpan : "添加楷体span标签",
                 imgUpload:"添加图片到文档",
+                attachment:"添加附件",
+                htmltable:"添加表格",
             }
         },
         //配置项
@@ -219,7 +298,7 @@
                 //console.log(r.data)
                 group_btn_str = ''
                 for(let i in r.data){
-                    group_btn_str += '<button class="layui-btn layui-btn-normal" onclick="switchImgGroup(' + r.data[i].group_id +')">' + r.data[i].group_name + '(' + r.data[i].group_cnt + ')</button>'
+                    group_btn_str += '<button class="layui-btn layui-btn-normal layui-btn-sm" onclick="switchImgGroup(' + r.data[i].group_id +')">' + r.data[i].group_name + '(' + r.data[i].group_cnt + ')</button>'
                 };
                 $("#select-img-group").append(group_btn_str)
             }
@@ -228,12 +307,6 @@
         var loading = layer.load();
         $.post("{% url 'manage_image' %}",{'types':2,'group_id':0},function(r){
             if(r.status){
-                //img_list_str = '<ul>'
-                //for(let i in r.data){
-                //    img_list_str += '<li class="select-img-list"><img class="select-img-list-i" src="' + r.data[i].path + '" title="' + r.data[i].name + '" /></li>'
-                //}
-                //img_list_str += '</ul>'
-                //$("#select-img").append(img_list_str);
                 //调用分页显示
                 laypage.render({
                     elem: 'select-img-page',//分页的div
@@ -297,6 +370,11 @@
                 layer.msg("获取分组图片失败")
             }
         })
+    };
+    //插入选择的附件到编辑器
+    insertAttach = function(e){
+        editor.insertValue("\n[【附件】"+ $(e).data('name') + "](/media/" + $(e).data('path') + ")");
+        layer.closeAll();
     }
 </script>
 <script src="{% static 'mrdoc.js' %}?version={{mrdoc_version}}"></script>
@@ -305,6 +383,7 @@
 </body>
 {% block custom_div %}
 {% endblock %}
+<!-- 选择和上传图片div -->
 <div id="upload-img" style="display:none;margin:20px;">
     <div class="layui-tab" lay-filter="img-tab">
       <ul class="layui-tab-title">
@@ -313,7 +392,7 @@
       </ul>
       <div class="layui-tab-content">
         <div class="layui-tab-item layui-show">
-            <button class="layui-btn layui-btn-normal layui-btn-lg" id="upload_img">点击上传图片</button>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" id="upload_img">点击上传图片</button>
         </div>
         <div class="layui-tab-item">
             <div class="layui-row" id="select-img-group">
@@ -324,6 +403,47 @@
       </div>
     </div>
 </div>
+<!-- 选择和上传附件div -->
+<div id="upload-attach" style="display:none;margin:20px;">
+    <span>* 仅支持.zip格式的压缩文件作为附件，文件大小不超过50Mb</span>
+    <div style="margin: 10px 0 0 10px;">
+        <button class="layui-btn layui-btn-normal layui-btn-sm" id="upload_attachment">点击上传附件</button>
+        <a class="layui-btn layui-btn-normal layui-btn-sm" href="{% url 'manage_attachment' %}" target="_blank">管理附件</a>
+    </div>
+    <table class="layui-table" id="attach_table" style="margin: 10px;width:90%;">
+        <thead>
+            <th>附件名称</th>
+            <th>附件大小</th>
+            <th>上传时间</th>
+            <th>操作</th>
+        </thead>
+        <tbody>
+
+        </tbody>
+        
+    </table>
+    <div id="select-attach-page"></div>
+</div>
+<!-- 添加表格div -->
+<div id="layer-table" style="display: none;margin: 10px;">
+    <div class="layui-row" style="margin: 10px;">
+        <div class="layui-form-item">
+        <div class="layui-inline">
+            <div class="layui-input-inline" style="width: 50px;">
+            <input type="number"  placeholder="行" id="row" class="layui-input" value="3">
+            </div>
+            <div class="layui-form-mid">x</div>
+            <div class="layui-input-inline" style="width: 50px;">
+            <input type="number" placeholder="列" id="col"  class="layui-input" value="3">
+            </div>
+            <div class="layui-form-mid" style="width: 100px;">
+            <button class="layui-btn layui-btn-normal layui-btn-xs" onclick="addtable(1)" >生成表格</button>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="layui-row" style="margin:10px;" id="TableGroup"></div>
+</div>
 <script>
     //按钮选择上传图片
     var upload = layui.upload;
@@ -345,6 +465,31 @@
         field:'manage_upload',
         size: 5000, //最大允许上传的文件大小
 
+    });
+    // 按钮选择上传附件
+    var upload_attach = layui.upload;
+    upload_attach.render({
+        elem: '#upload_attachment',
+        url: '{% url "manage_attachment" %}',
+        data:{types:0,csrfmiddlewaretoken: '{{ csrf_token }}'},
+        done: function(res, index, upload){ //上传后的回调
+            //上传成功，刷新页面
+            if(res.status){
+                editor.insertValue("\n[【附件】"+ res.data.name + "](/media/" + res.data.url + ")");
+                layer.closeAll();
+                layer.msg("上传成功");
+            }else{
+                layer.msg("上传出错，请重试！")
+            }
+        },
+        accept: 'file', //允许上传的文件类型
+        exts:'zip', //允许上传zip压缩文件
+        field:'attachment_upload',
+        size: 50000, //最大允许上传的文件大小
     })
+    //修改a标签链接新窗口打开
+    $('#content').on('click','a',function(e){
+        e.target.target = '_blank';
+    });
 </script>
 </html>

template/app_doc/create_base_2.html

@@ -0,0 +1,593 @@
+{% load staticfiles %}
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
+    <meta http-equiv="Cache-Control" content="no-transform" />
+    <meta http-equiv="Cache-Control" content="no-siteapp" />
+    <meta http-equiv="Cache-Control" content="max-age=7200" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="keywords" content="{% block keyword %}{% endblock %}mrdoc"/>
+    <meta name="description" content="{% block description %}{% endblock %}" />
+    <title>{% block title %}{% endblock %} - MrDoc</title>
+    <link href="{% static 'layui/css/layui.css' %}?version={{mrdoc_version}}" rel="stylesheet">
+    <link rel="stylesheet" href="{% static 'editor.md/css/editormd.css' %}?version={{mrdoc_version}}" />
+    <link rel="stylesheet" href="{% static 'katex/katex.min.css' %}?version={{mrdoc_version}}" />
+    <link rel="icon" href="{% static 'favicon_16.png' %}"/>
+    <link href="{% static 'mrdoc.css' %}?version={{mrdoc_version}}" rel="stylesheet">
+    <style>
+        /* 编辑器图标样式 */
+        .editormd-menu i{
+            color: #333;
+            font-size: 16px;
+        }
+        /* 选择上级文档样式 */
+        .selected-parent-doc{
+            text-decoration-line: underline;
+            font-weight: 700;
+            color: black;
+        }
+        /* 选择图片 - 图片列表样式 */
+        .select-img-list{
+            cursor: pointer;
+            position: relative;
+            display:flex;
+            float: left;
+            align-items:center;
+            width: 120px;
+            height:120px;
+            margin: 0 20px 30px 0;
+            text-align: center;
+            overflow: hidden;
+        }
+
+        .select-img-list:hover{
+            background-color: #EAFFEA;
+        }
+        .select-img-list-i{
+            display: block;
+            width: 100%;
+            height: auto;
+            -webkit-background-size: contain;
+            border: 1px solid transparent;
+            border-radius: 3px;
+            overflow: hidden;
+        }
+        /* layui分页组件样式 */
+        .layui-laypage .layui-laypage-curr .layui-laypage-em{
+            background-color: #1E9FFF !important;
+        }
+        /* layui按钮 */
+        /* .layui-btn{
+            background-color: #00C6CF !important;
+        } */
+    </style>
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+    <![endif]-->
+
+</head>
+<body>
+<div class="doc layui-fluid" style="padding-left:0px;">
+    <!-- 左侧工具栏 -->
+    <div class="doc-summary">
+        <div class="project-title"><i class="fa fa-edit"></i> MrDoc文档编辑器<br>
+            <span style="font-size: 14px;">你正在：{% block editor_type %}{% endblock %}</span>
+        </div>
+        
+        <hr>
+        {% block left_opera %}
+        {% endblock %}
+    </div>
+    <!-- 左侧工具栏结束 -->
+
+    <!-- 右侧编辑器栏 -->
+    <div class="doc-body">
+        <!-- 文档导航 -->
+        <div class="doc-header" role="navigation">
+
+            <a class="btn pull-left js-toolbar-action" aria-label="" href="javascript:void(0);" title="切换侧边栏">
+                <i class="fa fa-align-justify"></i>
+            </a>
+            <!-- 顶部工具栏 -->
+            {% block head_toolbar %}
+            {% endblock %}
+            <a class="btn pull-right" aria-label="" href="{% url 'pro_list' %}">
+                <i class="fa fa-home"></i> <span class="layui-hide-xs">首页</span>
+            </a>
+        </div>
+        <!-- 文档主体 -->
+        <div class="doc-body-content" style="padding-left: 15px;">
+            <div class="mrdoc-body-content-div">
+                <!-- 文档内容 -->
+                <div class="mrdoc-editor-content">
+                    <!-- 正文开始 -->
+                    <div class="markdown-body" id="content">
+                        {% block content %}
+                        {% endblock %}
+                    </div>
+                    <!-- 正文结束 -->
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <!-- 右侧编辑器结束 -->
+</div>
+
+<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
+<script src="{% static 'layui/layui.all.js' %}"></script>
+<script src="{% static 'editor.md/lib/marked.min.js' %}"></script>
+<script src="{% static 'editor.md/lib/prettify.min.js' %}"></script>
+<script src="{% static 'editor.md/lib/raphael.min.js' %}"></script>
+<script src="{% static 'editor.md/lib/underscore.min.js' %}"></script>
+<script src="{% static 'editor.md/lib/sequence-diagram.min.js' %}"></script>
+<script src="{% static 'editor.md/lib/flowchart.min.js' %}"></script>
+<script src="{% static 'editor.md/lib/jquery.flowchart.min.js' %}"></script>
+<script src="{% static 'editor.md/editormd.min.js' %}"></script>
+<script src="{% static 'mrdoc.editor.js' %}"></script>
+<script src="{% static 'mrdoc.js' %}?version={{mrdoc_version}}"></script>
+<script>
+    $.ajaxSetup({
+        data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
+    });
+    var tree = layui.tree;
+    //加载页面时执行一次
+    changeSidebar();
+    //监听浏览器宽度的改变
+    window.onresize = function(){
+        changeSidebar();
+    };
+    function changeSidebar(){
+        // 获取匹配指定的媒体查询
+        var screen_width = window.matchMedia('(max-width: 768px)');
+        //判断匹配状态
+        if(screen_width.matches){
+            //如果匹配到，切换侧边栏
+            //console.log('小屏幕')
+            $("body").addClass("big-page");
+        }else{
+            $("body").removeClass("big-page");
+        }
+    }
+    </script>
+    <!-- 切换隐藏侧边栏 -->
+    <script>
+        // 切换侧边栏
+        $(function(){
+            $(".js-toolbar-action").click(toggleSidebar);
+        });
+        //切换侧边栏显示隐藏
+        function toggleSidebar(){
+            console.log("切换侧边栏")
+            $("body").toggleClass("big-page");
+            return false;
+        }
+    </script>
+
+    <!-- 展开收起左边目录 -->
+    <script>
+        $(function(){
+            $(".switch-toc").click(SwitchToc);
+        });
+        function SwitchToc(i){
+            var $me = $(this);
+            $(this).parent().next("ul").toggleClass("toc-close"); //切换展开收起样式
+            $(this).toggleClass("fa-chevron-left fa-chevron-down");//切换图标
+        };
+    </script>
+<script>
+    $.ajaxSetup({
+            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
+        });
+    var layer = layui.layer;
+    var form = layui.form;
+    var element = layui.element;
+    var laypage = layui.laypage;
+    var md_changed = false; //初始化一个变量，用于判断编辑器是否修改
+    //初始化editormd
+    var editor = editormd("editor-md", {
+        width       :   "100%",
+        height      :   "800px",
+        placeholder :   "开始使用Markdown书写MrDoc文档，编辑器支持以下功能：\n1.粘贴上传图片\n2.六级标题\n3.代码高亮\n4.本地图片和外链图片\n5.表格\n6.多级列表和任务列表\n7.Katex公式\n8.流程图\n9.时序图\n……",
+        toolbarIcons : function() {
+            return [
+                "undo", "redo", "|",
+                "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase","kaiSpan", "|",
+                "h1", "h2", "h3", "h4", "|",
+                "list-ul", "list-ol", "hr", "link", "reference-link", "|",
+                "imgUpload", "attachment" ,"code", "code-block", "htmltable", "datetime", "emoji", "html-entities", "pagebreak", "|",
+                "watch", "preview", "|",
+                "help"
+            ]
+        },
+        //自定义工具栏添加楷体按钮
+        toolbarIconTexts : {
+            kaiSpan : "楷",
+        },
+        //自定义工具栏添加图片按钮
+        toolbarIconsClass : {
+            imgUpload:'fa-image',
+            attachment:'fa-upload',
+            htmltable:'fa-table',
+        },
+        //设置自定义工具栏按钮的事件
+        toolbarHandlers : {
+            /**
+             * @param {Object}      cm         CodeMirror对象
+             * @param {Object}      icon       图标按钮jQuery元素对象
+             * @param {Object}      cursor     CodeMirror的光标对象，可获取光标所在行和位置
+             * @param {String}      selection  编辑器选中的文本
+             */
+             // 点击“楷”字图标的响应函数
+            kaiSpan : function(cm, icon, cursor, selection) {
+                //var cursor    = cm.getCursor();     //获取当前光标对象，同cursor参数
+                //var selection = cm.getSelection();  //获取当前选中的文本，同selection参数
+                // 替换选中文本，如果没有选中文本，则直接插入
+                cm.replaceSelection('<span style="font-family:楷体">' + selection + "</span>");
+                // 如果当前没有选中的文本，将光标移到要输入的位置
+                if(selection === "") {
+                    cm.setCursor(cursor.line, cursor.ch + 29);
+                }
+                // this == 当前editormd实例
+                //console.log("testIcon =>", this, cm, icon, cursor, selection);
+            },
+            // 点击工具栏图片图标的响应函数 - 上传图片和选择图片
+            imgUpload : function(cm,icon,cursor,selection){
+                layer.ready(function(){
+                  element.init();
+                });
+                layer.open({
+                    type:'1',
+                    title:'添加图片',
+                    area:['800px','600px'],
+                    id:'uploadImg',//配置ID,
+                    content:$('#upload-img'),
+                })
+            },
+            //点击工具栏文件按钮的响应函数 - 上传和选择附件
+            attachment : function(cm,icon,cursor,selection){
+                layer.ready(function(){
+                  element.init();
+                });
+                layer.open({
+                    type:'1',
+                    title:'添加附件',
+                    area:['800px','600px'],
+                    id:'uploadAttach',//配置ID,
+                    content:$('#upload-attach'),
+                    success: function(layero, index){
+                        $.post('{% url "manage_attachment" %}',{types:2},function(r){
+                            $("#attach_table tbody").empty()
+                            if(r.status){
+                                // $.each(r.data,function(k,v){
+                                //     console.log(k,v)
+                                //     var row = "<tr><td>" + v.filename + "</td><td>"+ v.filesize +"</td><td>"+ v.filetime +"</td><td><button class='layui-btn layui-btn-normal layui-btn-sm' data-name='"+ v.filename +"'  data-path='"+ v.filepath +"' onclick='insertAttach(this)'>选择</button></td></tr>"
+                                //     $("#attach_table tbody").append(row)
+                                // })
+                                //调用分页显示
+                                laypage.render({
+                                    elem: 'select-attach-page',//分页的div
+                                    count: r.data.length, //数据总数
+                                    limit:10, //单页数
+                                    jump: function(obj){
+                                        //渲染HTML
+                                        $("#attach_table tbody").empty();
+                                        var thisData = r.data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
+                                        layui.each(thisData, function(k, v){
+                                            var row = "<tr><td>" + v.filename + "</td><td>"+ v.filesize +"</td><td>"+ v.filetime +"</td><td><button class='layui-btn layui-btn-normal layui-btn-sm' data-name='"+ v.filename +"'  data-path='"+ v.filepath +"' onclick='insertAttach(this)'>选择</button></td></tr>"
+                                            // arr.push(row);
+                                            $("#attach_table tbody").append(row)
+                                        });
+                                    }
+                                });
+                                //layer.close(loading);//关闭加载提示
+                            }else{
+                                layer.msg("获取附件失败，请稍后重试！")
+                            }
+                        })
+
+                    }
+                })
+            },
+            //点击工具栏表格按钮的响应函数 - 添加表格
+            htmltable:function(cm,icon,cursor,selection){
+                layer.ready(function(){
+                  element.init();
+                });
+                layer.open({
+                    type:1,
+                    id:'addTable',
+                    title:'添加表格',
+                    //content:"<div style='margin:10px;'><input type='number' id='row' class='layui-input' placeholder='输入行数'><input type='number' id='col' class='layui-input' placeholder='输入列数'></div>",
+                    content:$("#layer-table"),
+                    btn:['确定','取消'], //添加按钮
+                    yes:function(index,layero){
+                        var table_md = convertTable("DataTable1")
+                        console.log(table_md)
+                        editor.insertValue("\n" + table_md);
+                        $("#TableGroup").empty();//清空表格
+                        layer.close(index)
+                    },
+                    btn2:function(index,layero){
+                        $("#TableGroup").empty();//清空表格
+                        layer.close(index) // 关闭弹出框
+                    }
+                });
+            }
+        },
+        //设置语言
+        lang : {
+            toolbar : {
+                kaiSpan : "添加楷体span标签",
+                imgUpload:"添加图片到文档",
+                attachment:"添加附件",
+                htmltable:"添加表格",
+            }
+        },
+        //配置项
+        pageBreak : true, //分页符
+        path        :   "/static/editor.md/lib/",
+        saveHTMLToTextarea : true,
+        atLink      :   false,//禁用@链接
+        tex         :   true,//开启科学公式
+        tocm        :   true,//开启下拉目录
+        taskList    :   true,//开启任务列表
+        tocTitle    :   '文章导读',//目录标题
+        tocContainer:   '',
+        tocDropdown :   false,
+        emoji       :   true,//开启Emoji
+        flowChart   :   true, //开启流程图
+        sequenceDiagram : true, //开启序列图
+        imageUpload    : true, //开启图片上传
+        htmlDecode     : "link,style,script,iframe|on*", //解析部分HTML标签
+        imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
+        imageUploadURL : "{% url 'upload_doc_img' %}",
+        onchange:function(){
+            md_changed = true
+        },
+    });
+    //粘贴上传图片
+    $("#editor-md").on('paste', function (ev) {
+        var data = ev.clipboardData;
+        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
+        for (var index in items) {
+            var item = items[index];
+            if (item.kind === 'file') {
+                var blob = item.getAsFile();
+                var reader = new FileReader();
+                reader.onload = function (event) {
+                    var base64 = event.target.result;
+                    //ajax上传图片
+                    $.post("{% url 'upload_doc_img' %}",{base:base64}, function (ret) {
+                        layer.msg(ret.message);
+                        if (ret.success === 1) {
+                            //新一行的图片显示
+                            editor.insertValue("\n![](" + ret.url + ")");
+                        }
+                    });
+                }; // data url!
+                var url = reader.readAsDataURL(blob);
+            }
+        }
+    });
+    //未保存离开提示
+    window.onbeforeunload =function() {
+    　　 if(md_changed){
+            //console.log("页面未保存数据")
+            return 1;
+        }else{
+            return null;
+        }
+    };
+    //监听图片Tab选项卡切换
+    element.on('tab(img-tab)', function(data){
+      //console.log(this); //当前Tab标题所在的原始DOM元素
+      //console.log(data.index); //得到当前Tab的所在下标
+      //console.log(data.elem); //得到当前的Tab大容器
+      if(data.index == 1){
+        console.log('选择图片')
+        $("#select-img-group").empty(); //删除已有分组按钮
+        //请求新的分组数据
+        $.post("{% url 'manage_img_group' %}",{'types':3},function(r){
+            if(r.status){
+                //console.log(r.data)
+                group_btn_str = ''
+                for(var i in r.data){
+                    group_btn_str += '<button class="layui-btn layui-btn-normal layui-btn-sm" onclick="switchImgGroup(' + r.data[i].group_id +')">' + r.data[i].group_name + '(' + r.data[i].group_cnt + ')</button>'
+                };
+                $("#select-img-group").append(group_btn_str)
+            }
+        });
+        //请求全部图片数据
+        var loading = layer.load();
+        $.post("{% url 'manage_image' %}",{'types':2,'group_id':0},function(r){
+            if(r.status){
+                //调用分页显示
+                laypage.render({
+                    elem: 'select-img-page',//分页的div
+                    count: r.data.length, //数据总数
+                    limit:15, //单页数
+                    jump: function(obj){
+                        //渲染HTML
+                        document.getElementById('select-img').innerHTML = function(){
+                            var arr = []
+                            var thisData = r.data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
+                            layui.each(thisData, function(index, item){
+                                arr.push('<li class="select-img-list"><img class="select-img-list-i" onclick="insertImg(this);" src="' + item.path + '" title="' + item.name + '" /></li>');
+                            });
+                        return arr.join('');
+                        }();
+                    }
+                });
+                layer.close(loading);//关闭加载提示
+            }else{
+                layer.close(loading);
+                layer.msg("获取图片失败")
+            }
+        })
+      }
+    });
+    //插入选择的图片到编辑器
+    insertImg = function(e){
+        console.log(e.src);
+        editor.insertValue("\n![](" + e.src + ")");
+    };
+    //切换图片分组
+    switchImgGroup = function(e){
+        var switch_loading = layer.load();
+        $.post("{% url 'manage_image' %}", {
+            'types': 2,
+            'group_id': e
+        },
+        function(r) {
+            if (r.status) {
+                //调用分页显示
+                laypage.render({
+                    elem: 'select-img-page',//分页的div
+                    count: r.data.length,//数据总数
+                    limit: 15,//单页数
+                    jump: function(obj) {
+                        //渲染HTML
+                        document.getElementById('select-img').innerHTML = function() {
+                            var arr = []
+                            var thisData = r.data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
+                            layui.each(thisData,
+                            function(index, item) {
+                                arr.push('<li class="select-img-list"><img class="select-img-list-i" onclick="insertImg(this);" src="' + item.path + '" title="' + item.name + '" /></li>');
+                            });
+                            return arr.join('');
+                        } ();
+                    }
+                });
+                layer.close(switch_loading); //关闭加载提示
+            } else {
+                layer.close(switch_loading);
+                layer.msg("获取分组图片失败")
+            }
+        })
+    };
+    //插入选择的附件到编辑器
+    insertAttach = function(e){
+        editor.insertValue("\n[【附件】"+ $(e).data('name') + "](/media/" + $(e).data('path') + ")");
+        layer.closeAll();
+    }
+</script>
+<script src="{% static 'mrdoc.js' %}?version={{mrdoc_version}}"></script>
+{% block custom_script %}
+{% endblock %}
+</body>
+{% block custom_div %}
+{% endblock %}
+<!-- 选择和上传图片div -->
+<div id="upload-img" style="display:none;margin:20px;">
+    <div class="layui-tab" lay-filter="img-tab">
+      <ul class="layui-tab-title">
+        <li class="layui-this">上传图片</li>
+        <li>选择图片</li>
+      </ul>
+      <div class="layui-tab-content">
+        <div class="layui-tab-item layui-show">
+            <button class="layui-btn layui-btn-normal layui-btn-fluid" id="upload_img"><i class="layui-icon layui-icon-upload"></i> 点击上传图片</button>
+        </div>
+        <div class="layui-tab-item">
+            <div class="layui-row" id="select-img-group">
+            </div><hr>
+            <div class="layui-row" id="select-img"></div>
+            <div id="select-img-page"></div>
+        </div>
+      </div>
+    </div>
+</div>
+<!-- 选择和上传附件div -->
+<div id="upload-attach" style="display:none;margin:20px;">
+    <span>* 仅支持.zip格式的压缩文件作为附件，文件大小不超过50Mb</span>
+    <div style="margin: 10px 0 0 10px;">
+        <button class="layui-btn layui-btn-normal layui-btn-sm" id="upload_attachment"><i class="layui-icon layui-icon-upload"></i> 点击上传附件</button>
+        <a class="layui-btn layui-btn-normal layui-btn-sm" href="{% url 'manage_attachment' %}" target="_blank"><i class="fa fa-cubes"></i> 管理附件</a>
+    </div>
+    <table class="layui-table" id="attach_table" style="margin: 10px;width:90%;">
+        <thead>
+            <th>附件名称</th>
+            <th>附件大小</th>
+            <th>上传时间</th>
+            <th>操作</th>
+        </thead>
+        <tbody>
+
+        </tbody>
+        
+    </table>
+    <div id="select-attach-page"></div>
+</div>
+<!-- 添加表格div -->
+<div id="layer-table" style="display: none;margin: 10px;">
+    <div class="layui-row" style="margin: 10px;">
+        <div class="layui-form-item">
+        <div class="layui-inline">
+            <div class="layui-input-inline" style="width: 50px;">
+            <input type="number"  placeholder="行" id="row" class="layui-input" value="3">
+            </div>
+            <div class="layui-form-mid">x</div>
+            <div class="layui-input-inline" style="width: 50px;">
+            <input type="number" placeholder="列" id="col"  class="layui-input" value="3">
+            </div>
+            <div class="layui-form-mid" style="width: 100px;">
+            <button class="layui-btn layui-btn-normal layui-btn-xs" onclick="addtable(1)" >生成表格</button>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="layui-row" style="margin:10px;" id="TableGroup"></div>
+</div>
+<script>
+    //按钮选择上传图片
+    var upload = layui.upload;
+    upload.render({
+        elem: '#upload_img',
+        url: '{% url "upload_doc_img" %}',
+        done: function(res, index, upload){ //上传后的回调
+            //上传成功
+            if(res.success == 1){
+                editor.insertValue("\n![](" + res.url + ")");
+                layer.closeAll();
+                layer.msg("上传成功");
+            }else{
+                layer.msg("上传出错，请重试！")
+            }
+        },
+        accept: 'images', //允许上传的文件类型
+        acceptMime:'image/*',
+        field:'manage_upload',
+        size: 5000, //最大允许上传的文件大小
+
+    });
+    // 按钮选择上传附件
+    var upload_attach = layui.upload;
+    upload_attach.render({
+        elem: '#upload_attachment',
+        url: '{% url "manage_attachment" %}',
+        data:{types:0,csrfmiddlewaretoken: '{{ csrf_token }}'},
+        done: function(res, index, upload){ //上传后的回调
+            //上传成功，刷新页面
+            if(res.status){
+                editor.insertValue("\n[【附件】"+ res.data.name + "](/media/" + res.data.url + ")");
+                layer.closeAll();
+                layer.msg("上传成功");
+            }else{
+                layer.msg("上传出错，请重试！")
+            }
+        },
+        accept: 'file', //允许上传的文件类型
+        exts:'zip', //允许上传zip压缩文件
+        field:'attachment_upload',
+        size: 50000, //最大允许上传的文件大小
+    })
+    //修改预览div中a标签链接新窗口打开
+    $('div.editormd-preview').on('click','a',function(e){
+        e.target.target = '_blank';
+    });
+</script>
+</html>

template/app_doc/create_doc.html

@@ -1,93 +1,107 @@
-{% extends 'app_doc/create_base.html' %}
+{% extends 'app_doc/create_base_2.html' %}
 {% load staticfiles %}
 {% block title %}新建文档{% endblock %}
-{% block subtitle %}新建文档{% endblock %}
+{% block editor_type %}新建文档{% endblock %}
+
+{% block head_toolbar %}
+<a class="btn pull-left" aria-label="" href="{% url 'create_doc' %}?pid={{project.id}}" target="_blank">
+    <i class="fa fa-plus-square"></i> <span class="layui-hide-xs">新建文档</span>
+</a>
+<a class="btn pull-left" aria-label="" href="{% url 'manage_doc' %}?pid={{project.id}}" target="_blank">
+    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理文档</span>
+</a>
+<a class="btn pull-left" aria-label="" href="{% url 'manage_project' %}" target="_blank">
+    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理文集</span>
+</a>
+{% endblock %}
+
+
+{% block left_opera %}
+<div class="layui-form" style="padding: 10px;">
+    <div class="layui-row">
+        <div class="layui-col-md12" style="margin-bottom: 10px;">
+            <label class="doc-form-label" style="margin-right:0px;">
+                <button class="layui-btn layui-btn-normal layui-btn-sm" id="sel-doctemp" title="插入模板内容">
+                    <i class="fa fa-clipboard"></i> 模板
+                </button>
+            </label>
+
+            <label class="doc-form-label" style="margin-right:0px;">
+                <input type="file" id="insert-local-file" onchange="insertLocalFile(this)" style="display:none;">
+                <button class="layui-btn layui-btn-normal layui-btn-sm" id="sel-local" onclick="selectLocalFile()" title="插入本地文本文件内容">
+                    <i class="fa fa-clipboard"></i> 文本
+                </button>
+            </label>
+
+            <label class="doc-form-label">
+                <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="saveDoc()" title="保存当前内容为草稿文档">
+                    <i class="fa fa-save"></i> 保存
+                </button>
+            </label>
+            <label class="doc-form-label">
+                <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="createDoc()" id="create_doc" title="发布当前内容">
+                    <i class="fa fa-save"></i> 发布
+                </button>
+            </label>
+        </div>
+
+        <div class="layui-col-md12" style="margin-bottom: 10px;">
+            <div class="layui-input-inblock">
+              <select name="pro_id" lay-verify="required"  lay-filter="project" id="project">
+                <option value="">请选择一个文集（必选）</option>
+                <option value="-1">新建文集</option>
+                  <!-- 自己的文集 -->
+                  <optgroup label="自有文集" id="self-project">
+                  {% for p in project_list %}
+                      {% if p.role == 1 %}
+                      <option value="{{ p.id }}">[私密]《{{ p.name }}》</option>
+                      {% elif p.role == 2 %}
+                      <option value="{{ p.id }}" >[指定用户]《{{ p.name }}》</option>
+                      {% elif p.role == 3 %}
+                      <option value="{{ p.id }}" >[访问码]《{{ p.name }}》</option>
+                      {% else %}
+                      <option value="{{ p.id }}" >[公开]《{{ p.name }}》</option>
+                      {% endif %}
+                  {% endfor %}
+                  </optgroup>
+                  <!-- 协作的文集 -->
+                  {% if colla_project_list.count > 0 %}
+                  <optgroup label="协作文集">
+                  {% for p in colla_project_list %}
+                        <option value="{{ p.project.id }}">[协作]《{{ p.project.name }}》</option>
+                  {% endfor %}
+                  </optgroup>
+                  {% endif %}
+              </select>
+            </div>
+        </div>
+
+        <div class="layui-row">
+            <div class="layui-col-md12" style="margin-bottom: 10px;">
+                <span>点击文档树选择上级（可选）或</span>
+                <button class="layui-btn layui-btn-xs layui-btn-normal" id="clearParentDoc">不设上级</button>
+                <input type="text" id="parent-doc" hidden> 
+            </div>
+            <div class="layui-col-md12">
+                <input type="number" class="layui-input" placeholder="输入文档排序值，默认99" id="sort">
+            </div>
+            
+        </div>
+        <div class="layui-col-md12" id="doc-tree"></div>
+        
+    </div>
+</div>
+{% endblock %}
 
 {% block content %}
     <div class="create-doc-form">
         <div class="layui-form" style="">
             <!-- 标题 -->
             <div style="padding-bottom:10px;">
-                <!--<label class="layui-form-label" style="padding-left:0px;padding-right:0px;"><i class="fa fa-header"></i> 文档标题</label>-->
                 <div class="layui-input-block" style="margin-left:0px;">
                   <input type="text" name="doc-name" id="doc-name" required lay-verify="required" placeholder="请输入文档标题" autocomplete="off" class="layui-input">
                 </div>
             </div>
-
-            <div class="layui-row">
-                <div class="layui-col-md3 layui-col-sm6 " style="padding-bottom:10px;">
-                    <!--<label class="doc-form-label">所属文集</label>-->
-                    <div class="layui-input-inline">
-                      <select name="pro_id" lay-verify="required"  lay-filter="project" id="project">
-                        <option value="">请选择一个文集</option>
-                        <option value="-1">新建文集</option>
-                          <!-- 自己的文集 -->
-                          <optgroup label="自有文集" id="self-project">
-                          {% for p in project_list %}
-                              {% if p.role == 1 %}
-                              <option value="{{ p.id }}">[私密]《{{ p.name }}》</option>
-                              {% elif p.role == 2 %}
-                              <option value="{{ p.id }}" >[指定用户]《{{ p.name }}》</option>
-                              {% elif p.role == 3 %}
-                              <option value="{{ p.id }}" >[访问码]《{{ p.name }}》</option>
-                              {% else %}
-                              <option value="{{ p.id }}" >[公开]《{{ p.name }}》</option>
-                              {% endif %}
-                          {% endfor %}
-                          </optgroup>
-                          <!-- 协作的文集 -->
-                          {% if colla_project_list.count > 0 %}
-                          <optgroup label="协作文集">
-                          {% for p in colla_project_list %}
-                                <option value="{{ p.project.id }}">[协作]《{{ p.project.name }}》</option>
-                          {% endfor %}
-                          </optgroup>
-                          {% endif %}
-                      </select>
-                    </div>
-                </div>
-
-                <div class="layui-col-md3 layui-col-sm6" style="padding-bottom:10px;">
-                    <!--<label class="doc-form-label">所属上级</label>-->
-                    <div class="layui-input-inline">
-                      <select name="parent_id" lay-verify="required" id="parent-doc">
-                        <option value="">请选择所属上级</option>
-                      </select>
-                    </div>
-                </div>
-
-                <div class="layui-col-md5 layui-col-sm12 layui-col-xs12" style="padding-bottom:10px;">
-                    <label class="doc-form-label"><i class="fa fa-list-ol"></i> 排序</label>
-                    <div class="layui-input-inline">
-                      <input class="layui-input" placeholder="99" style="width:50px;" name="sort" id="sort"/>
-                    </div>
-
-                    <label class="doc-form-label" style="margin-right:0px;">
-                        <button class="layui-btn layui-btn-normal layui-btn-sm" id="sel-doctemp" title="插入模板内容">
-                            <i class="fa fa-clipboard"></i> 模板
-                        </button>
-                    </label>
-
-                    <label class="doc-form-label" style="margin-right:0px;">
-                        <input type="file" id="insert-local-file" onchange="insertLocalFile(this)" style="display:none;">
-                        <button class="layui-btn layui-btn-normal layui-btn-sm" id="sel-local" onclick="selectLocalFile()" title="插入本地文本文件内容">
-                            <i class="fa fa-clipboard"></i> 文本
-                        </button>
-                    </label>
-
-                    <label class="doc-form-label">
-                        <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="saveDoc()" title="保存当前内容为草稿文档">
-                            <i class="fa fa-save"></i> 保存
-                        </button>
-                    </label>
-                    <label class="doc-form-label">
-                        <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="createDoc()" id="create_doc" title="发布当前内容">
-                            <i class="fa fa-save"></i> 发布
-                        </button>
-                    </label>
-
-                </div>
-            </div>
         </div>
     </div>
     <div id="editor-md" class="layui-col-xs12">
@@ -98,210 +112,241 @@
 
 
 {% block custom_script %}
-    <script>
-        //选择文集
-        form.on('select(project)', function(data){
-            console.log(data.value); //得到被选中的值
-            if(data.value == -1){ //新建文集
-                layer.open({
-                    type:1,
-                    title:'新建文集',
-                    area:'300px;',
-                    id:'createPro',//配置ID
-                    //content:'<div style="padding: 20px;"><input class="layui-input" type="text" id="pname" style="margin-bottom:10px;" placeholder="输入文集名" required  lay-verify="required"><textarea name="desc" id="desc" placeholder="输入文集简介，不超过100个字，超出将被截断"  maxlength="100" class="layui-textarea"></textarea></div>',
-                    content: $('#create-project-div'),
-                    btn:['确定','取消'], //添加按钮
-                    btnAlign:'c', //按钮居中
-                    yes:function (index,layero) {
-                        data = {
-                            'pname':$("#pname").val(),
-                            'desc':$("#desc").val(),
-                            'role':$("#project-role").val(),
+<script>
+    var tree = layui.tree;
+    //选择文集
+    form.on('select(project)', function(data){
+        console.log(data.value); //得到被选中的值
+        if(data.value == -1){ //新建文集
+            layer.open({
+                type:1,
+                title:'新建文集',
+                area:'300px;',
+                id:'createPro',//配置ID
+                //content:'<div style="padding: 20px;"><input class="layui-input" type="text" id="pname" style="margin-bottom:10px;" placeholder="输入文集名" required  lay-verify="required"><textarea name="desc" id="desc" placeholder="输入文集简介，不超过100个字，超出将被截断"  maxlength="100" class="layui-textarea"></textarea></div>',
+                content: $('#create-project-div'),
+                btn:['确定','取消'], //添加按钮
+                btnAlign:'c', //按钮居中
+                yes:function (index,layero) {
+                    data = {
+                        'pname':$("#pname").val(),
+                        'desc':$("#desc").val(),
+                        'role':$("#project-role").val(),
+                    }
+                    $.post("{% url 'create_project' %}",data,function(r){
+                        if(r.status){
+                            //创建成功，更新文集select
+                            $("#self-project").append("<option value="+r.data.id+">《"+r.data.name+"》</option>");
+                            form.render();
+                            layer.close(index)
+                        }else{
+                            //创建失败，提示
+                            console.log(r)
                         }
-                        $.post("{% url 'create_project' %}",data,function(r){
-                            if(r.status){
-                                //创建成功，更新文集select
-                                $("#self-project").append("<option value="+r.data.id+">《"+r.data.name+"》</option>");
-                                form.render();
-                                //window.location.reload();
-                                layer.close(index)
-                            }else{
-                                //创建失败，提示
-                                console.log(r)
-
-                            }
-                        })
-                    },
-                });
-            }else{//获取文集的下级文档
-                $.post('{% url 'get_pro_doc' %}',{'pro_id':data.value},function(r){
-                    if(r.status){
-                        //解析文集的下级文档
-                        //console.log(r.data)
-                        $("#parent-doc").empty(); // 清空select选项
-                        $("#parent-doc").append("<option value=''></option>")
-                        for(let i in r.data) {
-                            $("#parent-doc").append("<option value='"+r.data[i][0]+"'>"+r.data[i][3]+r.data[i][1]+"</option>")
-                        };
-                        form.render();
-                    }else{
-                        layer.msg("获取下级文档失败！")
-                    }
-                });
-            }
-        });
-        //带pid参数自动选择文集
-        var sel_pro_list = $('dl.layui-anim dd');
-        for(var i = 0;i < sel_pro_list.length; i++){
-            if(sel_pro_list[i].getAttribute('lay-value') == {{pid}}){
-                var sel_pro = 'dd[lay-value=' + sel_pro_list[i].getAttribute('lay-value') + ']';
-                $('#project').siblings("div.layui-form-select").find('dl').find(sel_pro).click();
-            }
-        }
-        //发布文档
-        createDoc = function(){
-            var data = {
-                'project':$("#project").val(),
-                'parent_doc':$("#parent-doc").val(),
-                'doc_name':$("#doc-name").val(),
-                'content':editor.getHTML(),//获取editor解析的HTML
-                //'content':editor.getPreviewedHTML(),//获取预览的HTML
-                'pre_content':editor.getMarkdown(),
-                'sort':$("#sort").val(),
-            }
-            console.log(data)
-            if(data.doc_name == ""){
-                layer.msg('请输入文档标题！');
-            }
-            else if(data.project == ""){
-                layer.msg('请选择文集！');
-            }
-            else{
-                //发布按钮设为禁用
-                $("#create_doc").attr({"disabled":"disabled"});
-                $.post("{% url 'create_doc' %}",data,function(r){
-                    if(r.status){
-                        //创建成功
-                        layer.msg('发布文档成功，即将跳转到文档页面',function(){
-                            md_changed = false;
-                            //跳转到首页
-                            //window.location.href = "{% url 'pro_list' %}";
-                            //跳转到发布的文档
-                            window.location.href = "/project-" + r.data.pro + "/doc-" + r.data.doc
-                        });
-                    }else{
-                        //创建失败
-                        layer.msg('发布文档失败:'+r.data);
-                        //恢复按钮状态
-                        $("#create_doc").removeAttr("disabled");
-                    }
-                });
-            }
-        };
-        //保存草稿
-        saveDoc = function(){
-            var data = {
-                'project':$("#project").val(),
-                'parent_doc':$("#parent-doc").val(),
-                'doc_name':$("#doc-name").val(),
-                'content':editor.getHTML(),
-                'pre_content':editor.getMarkdown(),
-                'sort':$("#sort").val(),
-                'status':0
-            }
-            console.log(data)
-            if(data.doc_name == ""){
-                layer.msg('请输入文档标题！');
-            }
-            else if(data.project == ""){
-                layer.msg('请选择文集！');
-            }
-            else{
-                $.post("{% url 'create_doc' %}",data,function(r){
-                    if(r.status){
-                        //保存成功
-                        md_changed = false;
-                        layer.msg('保存草稿成功',function(){
-                            window.location.href = "/modify_doc/"+r.data.doc+"/";
-                        });
-                    }else{
-                        //创建失败
-                        layer.msg('保存草稿失败:'+r.data);
-                    }
-                });
-            }
-        };
-        //选择文档模板
-        $("#sel-doctemp").click(function(){
-            layer.open({
-              type: 1,
-              id:'temp-div',
-              content: $('#doctemp-list'),
-              //area:['530px','300px'],
-              area:['50%','50%'],
-            });
-        });
-        //插入模板
-        insertTemp = function(doctemp_id){
-            $.post("{% url 'get_doctemp' %}",{'doctemp_id':doctemp_id},function(r){
-                if(r.status){
-                    editor.insertValue(r.data);
-                    layer.closeAll()
-                }else{
-                    layer.msg(r.data)
-                }
-            });
-        };
-        //删除模板
-        delTemp = function(doctemp_id){
-            layer.open({
-                title:'删除模板',
-                content:'确认删除此模板？',
-                btn:['确定','取消'],
-                yes:function(index,layero){
-
+                    })
                 },
             });
-        };
-        //插入本地文本文件
-        function insertLocalFile(input) {
-			var file = input.files[0];
-			//filename = file.name.split(".")[0]; // 文件名
-			//支持chrome IE10
-			if (window.FileReader) {
-				var reader = new FileReader();
-				reader.onload = function() {
-					console.log(this.result);
-					editor.insertValue(this.result);
-				}
-				reader.readAsText(file);
-			}
-			//支持IE 7 8 9 10
-			else if (typeof window.ActiveXObject != 'undefined'){
-				var xmlDoc;
-				xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
-				xmlDoc.async = false;
-				xmlDoc.load(input.value);
-				console.log(xmlDoc.xml);
-				editor.insertValue(xmlDoc.xml);
-			}
-			//支持FF
-			else if (document.implementation && document.implementation.createDocument) {
-				var xmlDoc;
-				xmlDoc = document.implementation.createDocument("", "", null);
-				xmlDoc.async = false;
-				xmlDoc.load(input.value);
-				console.log(xmlDoc.xml);
-				editor.insertValue(xmlDoc.xml);
-			} else {
-				alert('error');
-			}
-        };
-		//选择本地文本文件
-		function selectLocalFile(){
-			$("#insert-local-file").trigger("click");
-		};
-    </script>
+        }else{//获取文集的下级文档
+            $.post("{% url 'get_pro_doc_tree' %}",{'pro_id':data.value},function(r){
+                if(r.status){
+                    var doc_tree = tree.render({
+                        elem:"#doc-tree",
+                        id:'docTree',
+                        // showCheckbox:true,
+                        onlyIconControl:true,
+                        data:r.data,
+                        text: {
+                            defaultNodeName: '未命名' //节点默认名称
+                            ,none: '文集暂无文档' //数据为空时的提示文本
+                            },
+                        click: function(obj){
+                            console.log(obj.data); //得到当前点击的节点数据
+                            // console.log(obj.state); //得到当前节点的展开状态：open、close、normal
+                            // console.log(obj.elem); //得到当前节点元素
+                            if(obj.data.level != 3){
+                                $('#parent-doc').val(obj.data.id);// 设置上级文档
+                                $("div.layui-tree-set").each(function(i){
+                                    var $me = $(this)
+                                    if($me.data('id') == obj.data.id){
+                                        // console.log('点击了')
+                                        $me.find('span.layui-tree-txt').first().addClass('selected-parent-doc')
+                                    }else{
+                                        $me.find('span.layui-tree-txt').first().removeClass('selected-parent-doc')
+                                    }
+                                });
+                            }else{
+                                layer.msg("第三级文档不能作为上级文档")
+                            }
+                            
+                        }
+                    });
+                }else{
+                    layer.msg("获取下级文档失败！")
+                }
+            });
+        }
+    });
+    //带pid参数自动选择文集
+    var sel_pro_list = $('dl.layui-anim dd');
+    for(var i = 0;i < sel_pro_list.length; i++){
+        if(sel_pro_list[i].getAttribute('lay-value') == {{pid}}){
+            var sel_pro = 'dd[lay-value=' + sel_pro_list[i].getAttribute('lay-value') + ']';
+            $('#project').siblings("div.layui-form-select").find('dl').find(sel_pro).click();
+        }
+    };
+    //发布文档
+    createDoc = function(){
+        var data = {
+            'project':$("#project").val(),
+            'parent_doc':$("#parent-doc").val(),
+            'doc_name':$("#doc-name").val(),
+            'content':editor.getHTML(),//获取editor解析的HTML
+            //'content':editor.getPreviewedHTML(),//获取预览的HTML
+            'pre_content':editor.getMarkdown(),
+            'sort':$("#sort").val(),
+        }
+        console.log(data)
+        if(data.doc_name == ""){
+            layer.msg('请输入文档标题！');
+        }
+        else if(data.project == ""){
+            layer.msg('请选择文集！');
+        }
+        else{
+            //发布按钮设为禁用
+            $("#create_doc").attr({"disabled":"disabled"});
+            $.post("{% url 'create_doc' %}",data,function(r){
+                if(r.status){
+                    //创建成功
+                    layer.msg('发布文档成功，即将跳转到文档页面',function(){
+                        md_changed = false;
+                        //跳转到首页
+                        //window.location.href = "{% url 'pro_list' %}";
+                        //跳转到发布的文档
+                        window.location.href = "/project-" + r.data.pro + "/doc-" + r.data.doc
+                    });
+                }else{
+                    //创建失败
+                    layer.msg('发布文档失败:'+r.data);
+                    //恢复按钮状态
+                    $("#create_doc").removeAttr("disabled");
+                }
+            });
+        }
+    };
+    //保存草稿
+    saveDoc = function(){
+        var data = {
+            'project':$("#project").val(),
+            'parent_doc':$("#parent-doc").val(),
+            'doc_name':$("#doc-name").val(),
+            'content':editor.getHTML(),
+            'pre_content':editor.getMarkdown(),
+            'sort':$("#sort").val(),
+            'status':0
+        }
+        console.log(data)
+        if(data.doc_name == ""){
+            layer.msg('请输入文档标题！');
+        }
+        else if(data.project == ""){
+            layer.msg('请选择文集！');
+        }
+        else{
+            $.post("{% url 'create_doc' %}",data,function(r){
+                if(r.status){
+                    //保存成功
+                    md_changed = false;
+                    layer.msg('保存草稿成功',function(){
+                        window.location.href = "/modify_doc/"+r.data.doc+"/";
+                    });
+                }else{
+                    //创建失败
+                    layer.msg('保存草稿失败:'+r.data);
+                }
+            });
+        }
+    };
+    //选择文档模板
+    $("#sel-doctemp").click(function(){
+        layer.open({
+          type: 1,
+          id:'temp-div',
+          content: $('#doctemp-list'),
+          //area:['530px','300px'],
+          area:['50%','50%'],
+        });
+    });
+    //清除所选上级文档
+    $("#clearParentDoc").click(function(){
+        $('#parent-doc').val("");
+
+        $("span.layui-tree-txt").each(function(i){
+            var $me = $(this)
+            $me.removeClass('selected-parent-doc')
+        });
+    });
+    //插入模板
+    insertTemp = function(doctemp_id){
+        $.post("{% url 'get_doctemp' %}",{'doctemp_id':doctemp_id},function(r){
+            if(r.status){
+                editor.insertValue(r.data);
+                layer.closeAll()
+            }else{
+                layer.msg(r.data)
+            }
+        });
+    };
+    //删除模板
+    delTemp = function(doctemp_id){
+        layer.open({
+            title:'删除模板',
+            content:'确认删除此模板？',
+            btn:['确定','取消'],
+            yes:function(index,layero){
+
+            },
+        });
+    };
+    //插入本地文本文件
+    function insertLocalFile(input) {
+        var file = input.files[0];
+        //filename = file.name.split(".")[0]; // 文件名
+        //支持chrome IE10
+        if (window.FileReader) {
+            var reader = new FileReader();
+            reader.onload = function() {
+                console.log(this.result);
+                editor.insertValue(this.result);
+            }
+            reader.readAsText(file);
+        }
+        //支持IE 7 8 9 10
+        else if (typeof window.ActiveXObject != 'undefined'){
+            var xmlDoc;
+            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
+            xmlDoc.async = false;
+            xmlDoc.load(input.value);
+            console.log(xmlDoc.xml);
+            editor.insertValue(xmlDoc.xml);
+        }
+        //支持FF
+        else if (document.implementation && document.implementation.createDocument) {
+            var xmlDoc;
+            xmlDoc = document.implementation.createDocument("", "", null);
+            xmlDoc.async = false;
+            xmlDoc.load(input.value);
+            console.log(xmlDoc.xml);
+            editor.insertValue(xmlDoc.xml);
+        } else {
+            alert('error');
+        }
+    };
+    //选择本地文本文件
+    function selectLocalFile(){
+        $("#insert-local-file").trigger("click");
+    };
+</script>
 {% endblock %}
 
 {% block custom_div %}

template/app_doc/create_doctemp.html

@@ -1,19 +1,52 @@
-{% extends 'app_doc/create_base.html' %}
+{% extends 'app_doc/create_base_2.html' %}
 {% load staticfiles %}
 {% block title %}新建文档模板{% endblock %}
-{% block subtitle %}新建模板{% endblock %}
+{% block editor_type %}新建模板{% endblock %}
+
+{% block head_toolbar %}
+<a class="btn pull-left" aria-label="" href="{% url 'create_doc' %}?pid={{project.id}}" target="_blank">
+    <i class="fa fa-plus-square"></i> <span class="layui-hide-xs">新建模板</span>
+</a>
+<a class="btn pull-left" aria-label="" href="{% url 'manage_doctemp' %}?pid={{project.id}}" target="_blank">
+    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理模板</span>
+</a>
+<a class="btn pull-left" aria-label="" href="{% url 'manage_project' %}" target="_blank">
+    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理文集</span>
+</a>
+{% endblock %}
+
+{% block left_opera %}
+<div class="layui-form" style="padding: 10px;">
+    <div class="layui-row">
+        <div class="layui-col-md12" style="margin-bottom: 10px;">
+            <label class="doc-form-label">
+                <button class="layui-btn layui-btn-normal layui-btn-fluid" onclick="createDocTemp()">
+                    <i class="fa fa-save"></i> 保存模板
+                </button>
+            </label>
+        </div>
+    </div>
+    <!-- 已有模板 -->
+    <div class="layui-row">
+        <div class="layui-card">
+            <div class="layui-card-header">现有模板</div>
+            <div class="layui-card-body">
+                {% for temp in doctemps %}
+                    <li><a href="{% url 'modify_doctemp' temp.id %}" target="_blank" title="点击查看修改《{{temp.name}}》的内容"><i class="fa fa-file"></i> {{temp.name}}</a></li>
+                {% endfor %}
+            </div>
+          </div>
+    </div>
+</div>
+{% endblock %}
+
 
 {% block content %}
     <div class="create-doc-form">
-        <div class="layui-form">
-            <label class="doc-form-label layui-hide-xs">模板标题</label>
-            <div class="layui-input-inline">
-              <input type="text" name="doc-name" id="doctemp-name" required lay-verify="required" placeholder="请输入模板名称" autocomplete="off" class="layui-input">
+        <div class="layui-form" style="padding-bottom:10px;">
+            <div class="layui-input-block" style="margin-left:0px;">
+              <input type="text" name="doc-name" id="doctemp-name" required lay-verify="required" placeholder="请输入模板标题" autocomplete="off" class="layui-input">
             </div>
-            <label class="doc-form-label">
-                <button class="layui-btn layui-btn-normal" onclick="createDocTemp()">
-                    <i class="fa fa-save "></i><span class="layui-hide-xs"> 保存</span></button>
-            </label>
         </div>
     </div>
     <div id="editor-md">
@@ -34,7 +67,8 @@
                 if(r.status){
                     //创建成功
                     layer.msg('保存成功',function(){
-                        window.location.href = "{% url 'pro_list' %}";
+                        md_changed = false;
+                        window.location.href = "{% url 'manage_doctemp' %}";
                     });
                 }else{
                     //创建失败

template/app_doc/doc.html

@@ -14,10 +14,10 @@
             <i class="fa fa-edit"></i> <span class="layui-hide-xs">修改</span>
         </a>
         <a class="btn pull-left" aria-label="" href="{% url 'create_doc' %}?pid={{project.id}}" target="_blank">
-            <i class="fa fa-file"></i> <span class="layui-hide-xs">添加</span>
+            <i class="fa fa-plus-square"></i> <span class="layui-hide-xs">添加</span>
         </a>
         <a class="btn pull-left" aria-label="" href="{% url 'manage_doc' %}" target="_blank">
-            <i class="fa fa-file"></i> <span class="layui-hide-xs">管理</span>
+            <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理</span>
         </a>
     {% elif colla_user > 0 %}
         <span class="btn pull-left">|</span>
@@ -27,7 +27,7 @@
         </a>
         {% endif %}
         <a class="btn pull-left" aria-label="" href="{% url 'create_doc' %}?pid={{project.id}}" target="_blank">
-            <i class="fa fa-file"></i> <span class="layui-hide-xs">添加</span>
+            <i class="fa fa-plus-square"></i> <span class="layui-hide-xs">添加</span>
         </a>
     {% endif %}
     <!-- 文档目录 -->
@@ -37,7 +37,7 @@
 {% block content_head %}
     <h1>{{ doc.name }}</h1><hr>
 
-    <p style="color: #666;font-size:12px;">
+    <p style="color: #c2c2c2;font-size:12px;">
         <!--<i class="fa fa-th-large"></i> 发表：{{ doc.create_time }}-->
         <i class="fa fa-user"></i> 作者：{{ doc.create_user.username }}
     &nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-edit"></i> 最后修改于：{{ doc.modify_time }}
@@ -57,16 +57,16 @@
         <hr>
         <div>
             {% if doc.id|get_doc_previous == None %}
-                <button class="layui-btn layui-btn-disabled layui-btn-sm"><i class="layui-icon layui-icon-prev "></i>上一篇</button>
+                <button class="layui-btn layui-btn-disabled layui-btn-sm layui-btn-radius"><i class="layui-icon layui-icon-prev "></i>上一篇</button>
             {% else %}
-                <a href="{% url 'doc' doc.top_doc doc.id|get_doc_previous %}" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-prev "></i>上一篇</a>
+                <a href="{% url 'doc' doc.top_doc doc.id|get_doc_previous %}" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius"><i class="layui-icon layui-icon-prev "></i>上一篇</a>
             {% endif %}
         </div>
         <div>
             {% if doc.id|get_doc_next == None %}
-                <button class="layui-btn layui-btn-disabled layui-btn-sm">下一篇<i class="layui-icon layui-icon-next"></i></button>
+                <button class="layui-btn layui-btn-disabled layui-btn-sm layui-btn-radius">下一篇<i class="layui-icon layui-icon-next"></i></button>
             {% else %}
-                <a href="{% url 'doc' doc.top_doc doc.id|get_doc_next %}" class="layui-btn layui-btn-normal layui-btn-sm">下一篇<i class="layui-icon layui-icon-next"></i></a>
+                <a href="{% url 'doc' doc.top_doc doc.id|get_doc_next %}" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius">下一篇<i class="layui-icon layui-icon-next"></i></a>
             {% endif %}
         </div>
     </div>

template/app_doc/docs_base.html

@@ -59,6 +59,12 @@
         .markdown-body p code{
             border:none;
         }
+        /* 分享图标样式 */
+        /* .share-div a{
+            background-color: #00C6CF !important;
+            color: white !important;
+            border-color: #00C6CF !important;
+        } */
     </style>
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
@@ -90,6 +96,11 @@
             </p>
         </div>
         <hr>
+        <!-- <div style="margin-left:15px;">
+            <a href="javascript:void(0);" onclick="openDocTree()"><i class="fa fa-bars"></i> 展开</a>
+            <a href="javascript:void(0);" onclick="closeDocTree()"><i class="fa fa-bars"></i> 折叠</a>
+        </div> -->
+        
         <!-- 遍历文集大纲 -->
         {% load doc_filter %}
         <nav>
@@ -208,7 +219,6 @@
 
 <script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
 <script src="{% static 'layui/layui.all.js' %}"></script>
-<!--<script src="{% static 'prism/prism.js' %}"></script>-->
 <script src="{% static 'editor.md/lib/marked.min.js' %}"></script>
 <script src="{% static 'editor.md/lib/prettify.min.js' %}"></script>
 <script src="{% static 'editor.md/lib/raphael.min.js' %}"></script>
@@ -227,7 +237,7 @@
     };
     function changeSidebar(){
         // 获取匹配指定的媒体查询
-        let screen_width = window.matchMedia('(max-width: 768px)');
+        var screen_width = window.matchMedia('(max-width: 768px)');
         //判断匹配状态
         if(screen_width.matches){
             //如果匹配到，切换侧边栏
@@ -279,18 +289,16 @@
     <!-- 页面初始化字体设置 -->
     <script>
         font_stauts = window.localStorage.getItem('font-sans')
-        //font_size = window.localStorage.getItem('font-size')
-        if(font_stauts == 'serif'){
+        if(font_stauts == 'serif'){// 字体类型
             $(".doc-content").toggleClass("switch-font")
             $("#content").toggleClass("switch-font")
         }
-        if(window.localStorage.getItem('font-size')){
+        if(window.localStorage.getItem('font-size')){// 字体大小
             font_size = window.localStorage.getItem('font-size')
             console.log(font_size)
-            //$('.doc-info h1').css({'font-size':font_size+'rem'})
             $('#content').css({'font-size':font_size+'rem'})
         }else{
-            window.localStorage.setItem('font-size',0.8)
+            window.localStorage.setItem('font-size',1.0)
         }
     </script>
     <!-- 返回顶部 -->
@@ -351,7 +359,6 @@
             console.log(font_size)
             if(parseFloat(font_size) < 1.4){
                 size = parseFloat(font_size) + 0.1
-                //$('.doc-info h1').css({'font-size':size+'rem'})
                 $('#content').css({'font-size':size+'rem'})
                 window.localStorage.setItem('font-size',size)
             }else{
@@ -364,10 +371,8 @@
         });
         function smallFont(){
             var font_size = window.localStorage.getItem('font-size')
-            //console.log(font_size)
             if(parseFloat(font_size) >= 0.6){
-                size = parseFloat(font_size) - 0.2
-                //$('.doc-info h1').css({'font-size':size+'rem'})
+                size = parseFloat(font_size) - 0.1
                 $('#content').css({'font-size':size+'rem'})
                 window.localStorage.setItem('font-size',size)
             }else{
@@ -387,6 +392,26 @@
         };
     </script>
 
+    <!-- 展开\收起文档树 -->
+    <script>
+        function openDocTree(){
+            $("nav ul.summary ul").each(function(obj){
+                console.log(obj,this)
+                $(this).removeClass("toc-close")
+                $(this).prev().children('i').toggleClass("fa-chevron-left fa-chevron-down");//切换图标
+            })
+            
+        };
+        function closeDocTree(){
+            $("nav ul.summary ul").each(function(obj){
+                console.log(obj,this)
+                $(this).addClass("toc-close")
+                $(this).prev().children('i').toggleClass("fa-chevron-left fa-chevron-down");//切换图标
+            })
+            
+        };
+    </script>
+
     <!-- 统计代码开始 -->
         {% if debug %}
         {% else %}

template/app_doc/foot_base.html

@@ -1,8 +1,9 @@
 <div class="layui-footer" style="border-top: 1px #e6e6e6 solid;text-align:center;margin:20px;width:100%;">
     <div style="margin-top:10px;">
-        © <a href="/">MrDoc 2019-2020</a>&nbsp;-&nbsp;
-        基于<a href="https://www.djangoproject.com/" target="_blank">Django框架</a>&nbsp;-&nbsp;
-        <a href="https://zmister.com" target="_blank">州的先生</a>出品 -
+        © <a href="/">MrDoc 2019-2020</a>&nbsp;|&nbsp;
+        <span class="layui-hide-xs">基于<a href="https://www.djangoproject.com/" target="_blank">Django</a>&nbsp;|&nbsp;</span>
+        <a href="https://zmister.com" target="_blank">州的先生</a>出品 |
         <a href="{% url 'sitemap' %}" target="_blank">网站地图</a>
     </div>
+
 </div>

template/app_doc/head_base.html

@@ -7,14 +7,16 @@
             </a>
         </div>
         <!-- 搜索框 -->
-        <!--<div style="margin:12px;" class="layui-hide-xs">-->
-            <!--<form method="get" target="_blank" action="">-->
-            <!--<div class="layui-input-inline">-->
-                <!--<input class="layui-input mrdoc-search-input" placeholder="搜索文集或文档" name="kw"/>-->
-                <!--<i class="layui-icon layui-icon-search" style="position: absolute;top:12px;right: 8px;"></i>-->
-            <!--</div>-->
-            <!--</form>-->
-        <!--</div>-->
+        <div style="margin:12px;" class="layui-hide-xs">
+            <form method="get" action="">
+            <div class="layui-input-inline">
+                <input class="layui-input mrdoc-search-input" placeholder="搜索文集或文档" name="kw"/>
+                <button type="submit" style="position: absolute;top:12px;right: 8px;border: none;background-color: white;">
+                    <i class="layui-icon layui-icon-search" ></i>
+                </button>
+            </div>
+            </form>
+        </div>
         <!-- 新建文档按钮 -->
         <div class="layui-hide-xs" style="">
             <ul class="layui-nav" style="">
@@ -26,7 +28,7 @@
             </ul>
         </div>
         <!-- 州的先生博客链接 -->
-        <div class="layui-hide-xs" style="">
+        <!-- <div class="layui-hide-xs" style="">
             <ul class="layui-nav" style="">
                 <li class="layui-nav-item">
                     <a href="https://zmister.com" target="_blank">
@@ -34,7 +36,7 @@
                     </a>
                 </li>
             </ul>
-        </div>
+        </div> -->
         <!-- 用户菜单 -->
         <div class="">
         <ul class="layui-nav layui-layout-right">

template/app_doc/manage_attachment.html

@@ -0,0 +1,129 @@
+{% extends 'app_doc/manage_base.html' %}
+{% load staticfiles %}
+{% block title %}附件管理{% endblock %}
+{% block content %}
+    <div class="layui-card-header" style="margin-bottom: 10px;">
+      <div class="layui-row">
+          <span style="font-size:18px;">附件管理
+          </span>
+      </div>
+  </div>
+    <div class="layui-row">
+        <form action="{% url 'manage_attachment' %}" method="get">
+        <div class="layui-form-item">
+            <div class="layui-input-inline">
+                <input type="text" name="kw" id="kw"  placeholder="输入附件名称" autocomplete="off" class="layui-input">
+            </div>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" type="submit"><i class="layui-icon layui-icon-search"></i>搜索</button>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" id="upload_attachment"><i class="layui-icon layui-icon-upload"></i>上传附件(.zip格式)</button>
+        </div>
+        </form>
+    </div>
+    <div class="layui-row" >
+        <table class="layui-table"  id="doctemp-list" lay-skin="" lay-even>
+            <colgroup>
+            <col width="400">
+            <col width="200">
+            <col width="200">
+            <col>
+      </colgroup>
+      <thead>
+        <tr>
+          <th>附件名称</th>
+            <th>文件大小</th>
+          <th>上传时间</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for attachment in attachments %}
+        <tr>
+            <td><a href="/media/{{attachment.file_path}}" target="_blank">{{ attachment.file_name }}</a></td>
+            <td>{{ attachment.file_size }}</td>
+            <td>{{ attachment.create_time }}</td>
+            <td>
+                <a href="javascript:void(0);" onclick="delAttach('{{attachment.id}}');" class="layui-btn layui-btn-normal layui-btn-xs">
+                    <i class="layui-icon layui-icon-delete"></i>删除
+                </a>
+            </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+        </table>
+    </div>
+    <!-- 分页 -->
+    <div class="layui-row">
+        <div class="layui-box layui-laypage layui-laypage-default">
+                <!-- 上一页 -->
+                {% if attachments.has_previous %}
+                    <a href="?page={{ attachments.previous_page_number }}&kw={{attachments.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">上一页</a>
+                {% else %}
+                    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">上一页</a>
+                {% endif %}
+                <!-- 当前页 -->
+                <span class="layui-laypage-curr">
+                    <em class="layui-laypage-em"></em>
+                    <em>{{ attachments.number }}/{{ attachments.paginator.num_pages }}</em>
+                </span>
+                <!-- 下一页 -->
+                {% if attachments.has_next %}
+                    <a href="?page={{ attachments.next_page_number }}&kw={{attachments.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">下一页</a>
+                {% else %}
+                    <a class="layui-btn layui-btn-xs layui-btn-disabled">下一页</a>
+                {% endif %}
+        </div>
+    </div>
+{% endblock %}
+{% block custom_script %}
+<script>
+    //上传附件
+    var upload = layui.upload;
+    upload.render({
+        elem: '#upload_attachment',
+        url: '{% url "manage_attachment" %}',
+        data:{types:0,csrfmiddlewaretoken: '{{ csrf_token }}'},
+        done: function(res, index, upload){ //上传后的回调
+            //上传成功，刷新页面
+            if(res.status == 1){
+                window.location.reload();
+            }else{
+                layer.msg("上传出错，请重试！")
+            }
+        },
+        accept: 'file', //允许上传的文件类型
+        exts:'zip', //允许上传zip压缩文件
+        field:'attachment_upload',
+        size: 50000, //最大允许上传的文件大小
+
+    })
+    // 删除附件
+    delAttach = function(attach_id){
+        layer.open({
+            type:1,
+            title:'删除附件',
+            area:'300px;',
+            id:'delPro',//配置ID
+            content:'<div style="margin-left:10px;">警告：删除附件后，文档中引用的附件将失效！</div>',
+            btn:['确定','取消'], //添加按钮
+            btnAlign:'c', //按钮居中
+            yes:function (index,layero) {
+                data = {
+                    'attach_id':attach_id,
+                    'types':1
+                }
+                $.post("{% url 'manage_attachment' %}",data,function(r){
+                    if(r.status){
+                        //修改成功
+                        window.location.reload();
+                        //layer.close(index)
+                    }else{
+                        //修改失败，提示
+                        console.log(r)
+                        layer.msg(r.data)
+                    }
+                })
+            },
+        });
+    }
+</script>
+{% endblock %}

template/app_doc/manage_base.html

@@ -10,16 +10,32 @@
     <link href="{% static 'viewerjs/viewer.css' %}?version={{mrdoc_version}}" rel="stylesheet">
     <link rel="icon" href="{% static 'favicon_16.png' %}"/>
     <style>
-        .logo img{
-            height: 30px;
-        }
         .layui-btn a{
             color:white;
         }
+        /* 左侧菜单栏悬浮样式 */
+        .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover{
+          background-color: #1E9FFF !important;
+        }
+        .layui-nav-tree .layui-nav-bar{
+          background-color: #1E9FFF !important;
+        }
+        /* 顶部菜单栏悬浮样式 */
+        .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{
+          background-color: #1E9FFF !important;
+        }
         /* 管理文档文档状态条件筛选 管理图片图片分组筛选 */
         .doc_status_condition > a.current{
             color: #000!important;
         }
+        /* layui分页组件样式 */
+        .layui-laypage .layui-laypage-curr .layui-laypage-em{
+            background-color: #1E9FFF !important;
+        }
+        /* 设置输入框的高度 和layui-btn-sm一致 */
+        .layui-input{
+          height: 30px !important;
+        }
     </style>
 </head>
 <body class="layui-layout-body">
@@ -27,7 +43,6 @@
     <div class="layui-header">
         <div class="layui-logo">
             <a class="logo" href="{% url 'pro_list' %}">
-{#            <img src="/media/logo-white.png" />#}
             <h1 style="color: white;">
                 <strong>MrDoc</strong>
                 <span style="font-size: 14px;" class="layui-badge-rim">个人中心</span>
@@ -63,6 +78,9 @@
             </li>
             <li class="layui-nav-item layui-nav-itemed">
               <a href="{% url 'manage_image' %}"><i class="layui-icon layui-icon-picture"></i> 图片素材管理</a>
+            </li>
+              <li class="layui-nav-item layui-nav-itemed">
+              <a href="{% url 'manage_attachment' %}"><i class="layui-icon layui-icon-export"></i> 附件管理</a>
             </li>
               <li class="layui-nav-item layui-nav-itemed">
               <a href="{% url 'manage_token' %}"><i class="layui-icon layui-icon-key"></i> 用户Token管理</a>

template/app_doc/manage_doc.html

@@ -18,16 +18,16 @@
               <input name="status" value="{% if doc_status == 'all' %}all{% elif doc_status == 'published' %}published{% elif doc_status == 'draft' %}draft{% endif %}" hidden>
             </span>
             <div class="layui-input-inline" style="float:inherit;">
-                <input type="text" name="kw" id="kw" placeholder="输入文档内容" autocomplete="off" class="layui-input">
+                <input type="text" name="kw" id="kw" placeholder="输入文档标题或内容" autocomplete="off" class="layui-input">
             </div>
-            <button class="layui-btn" type="submit">搜索</button>
-            <button class="layui-btn"><a href="{% url 'create_doc' %}" target="_blank">新建文档</a></button>
+            <button class="layui-btn layui-btn-normal layui-btn-xs" type="submit"><i class="layui-icon layui-icon-search"></i>搜索</button>
+            <a href="{% url 'create_doc' %}" target="_blank" class="layui-btn layui-btn-normal layui-btn-xs"><i class="layui-icon layui-icon-addition"></i>新建文档</a>
         </div>
         </form>
     </div>
 
-    <div class="layui-row" lay-skin="line">
-        <table class="layui-table"  id="doctemp-list" lay-skin="">
+    <div class="layui-row" lay-skin="">
+        <table class="layui-table"  id="doctemp-list" lay-skin="" lay-even>
       <thead>
         <tr>
             <th>文档名称</th>
@@ -43,11 +43,11 @@
         <tr>
             {% if doc.status == 1 %}
                 <td>
-                    <a href="{% url 'doc' doc.top_doc doc.id %}" target="_blank" title="查看文档：{{doc.name}}">{{ doc.name }} —— <span class="layui-badge layui-bg-black">已发布</span></a>
+                    <a href="{% url 'doc' doc.top_doc doc.id %}" target="_blank" title="查看文档：{{doc.name}}">{{ doc.name }} <i class="layui-icon layui-icon-ok-circle" style="color:#01AAED"></i></a>
                 </td>
             {% else %}
                 <td>
-                    <a href="{% url 'modify_doc' doc.id %}" target="_blank" title="修改文档：{{doc.name}}">{{ doc.name }} —— <span class="layui-badge">草稿</span></a>
+                    <a href="{% url 'modify_doc' doc.id %}" target="_blank" title="修改文档：{{doc.name}}">{{ doc.name }} <i class="layui-icon layui-icon-menu-fill" style="color:#FF5722"></i></a>
                 </td>
             {% endif %}
             <td>{{ doc.parent_doc|get_doc_parent }}</td>
@@ -56,8 +56,12 @@
             </td>
             <td>{{ doc.create_time }}</td>
             <td>
-                <a href="{% url 'modify_doc' doc_id=doc.id %}" target="_blank" class="layui-btn layui-btn-xs">修改</a>
-                <a href="javascript:void(0);" onclick="delDoc('{{doc.id}}');" class="layui-btn layui-btn-xs">删除</a>
+                <a href="{% url 'modify_doc' doc_id=doc.id %}" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal">
+                    <i class="layui-icon layui-icon-edit"></i>修改
+                </a>
+                <a href="javascript:void(0);" onclick="delDoc('{{doc.id}}');" class="layui-btn layui-btn-xs layui-btn-normal">
+                    <i class="layui-icon layui-icon-delete"></i>删除
+                </a>
             </td>
         </tr>
         {% endfor %}
@@ -66,18 +70,24 @@
     </div>
     <!-- 分页 -->
     <div class="layui-row">
-        <div class="pagination">
-            <span class="step-links">
+        <div class="layui-box layui-laypage layui-laypage-default">
+                <!-- 上一页 -->
                 {% if docs.has_previous %}
-                    <a href="?page={{ docs.previous_page_number }}&kw={{docs.kw}}&status={{docs.status}}" class="layui-btn layui-btn-xs">上一页</a>
+                    <a href="?page={{ docs.previous_page_number }}&kw={{docs.kw}}&status={{docs.status}}" class="layui-btn layui-btn-xs layui-btn-normal">上一页</a>
+                {% else %}
+                    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">上一页</a>
                 {% endif %}
-                <span class="current">
-                    当前页： {{ docs.number }} 共 {{ docs.paginator.num_pages }} 页
+                <!-- 当前页 -->
+                <span class="layui-laypage-curr">
+                    <em class="layui-laypage-em"></em>
+                    <em>{{ docs.number }}/{{ docs.paginator.num_pages }}</em>
                 </span>
+                <!-- 下一页 -->
                 {% if docs.has_next %}
-                    <a href="?page={{ docs.next_page_number }}&kw={{docs.kw}}&status={{docs.status}}" class="layui-btn layui-btn-xs">下一页</a>
+                    <a href="?page={{ docs.next_page_number }}&kw={{docs.kw}}&status={{docs.status}}" class="layui-btn layui-btn-xs layui-btn-normal">下一页</a>
+                {% else %}
+                    <a class="layui-btn layui-btn-xs layui-btn-disabled">下一页</a>
                 {% endif %}
-            </span>
         </div>
     </div>
 {% endblock %}

template/app_doc/manage_doctemp.html

@@ -14,13 +14,13 @@
             <div class="layui-input-inline">
                 <input type="text" name="kw" id="kw"  placeholder="输入文档模板内容" autocomplete="off" class="layui-input">
             </div>
-            <button class="layui-btn" type="submit">搜索</button>
-            <button class="layui-btn" type="button"><a href="{% url 'create_doctemp' %}" target="_blank">新建文档模板</a></button>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" type="submit"><i></i>搜索</button>
+            <a href="{% url 'create_doctemp' %}" target="_blank" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-addition"></i>新建文档模板</a>
         </div>
         </form>
     </div>
-    <div class="layui-row" lay-skin="line">
-        <table class="layui-table"  id="doctemp-list" lay-skin="">
+    <div class="layui-row" >
+        <table class="layui-table"  id="doctemp-list" lay-skin="" lay-even>
             <colgroup>
             <col width="200">
             <col width="200">
@@ -39,9 +39,12 @@
           <td>{{ temp.name }}</td>
           <td>{{ temp.create_time }}</td>
           <td>
-{#              <a href="javascript:void(0);" onclick="insertTemp('{{temp.id}}');">查看</a>#}
-              <a href="{% url 'modify_doctemp' doctemp_id=temp.id %}" target="_blank" class="layui-btn layui-btn-xs">修改</a>
-              <a href="javascript:void(0);" onclick="delTemp('{{temp.id}}');" class="layui-btn layui-btn-xs">删除</a>
+              <a href="{% url 'modify_doctemp' doctemp_id=temp.id %}" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal">
+                  <i class="layui-icon layui-icon-edit"></i>修改
+              </a>
+              <a href="javascript:void(0);" onclick="delTemp('{{temp.id}}');" class="layui-btn layui-btn-xs layui-btn-normal">
+                <i class="layui-icon layui-icon-delete"></i>删除
+            </a>
           </td>
         </tr>
         {% endfor %}
@@ -50,18 +53,24 @@
     </div>
     <!-- 分页 -->
     <div class="layui-row">
-        <div class="pagination">
-            <span class="step-links">
+        <div class="layui-box layui-laypage layui-laypage-default">
+                <!-- 上一页 -->
                 {% if doctemps.has_previous %}
-                    <a href="?page={{ doctemps.previous_page_number }}&kw={{doctemps.kw}}" class="layui-btn layui-btn-xs">上一页</a>
+                    <a href="?page={{ doctemps.previous_page_number }}&kw={{doctemps.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">上一页</a>
+                {% else %}
+                    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">上一页</a>
                 {% endif %}
-                <span class="current">
-                    当前页： {{ doctemps.number }} 共 {{ doctemps.paginator.num_pages }} 页
+                <!-- 当前页 -->
+                <span class="layui-laypage-curr">
+                    <em class="layui-laypage-em"></em>
+                    <em>{{ doctemps.number }}/{{ doctemps.paginator.num_pages }}</em>
                 </span>
+                <!-- 下一页 -->
                 {% if doctemps.has_next %}
-                    <a href="?page={{ doctemps.next_page_number }}&kw={{doctemps.kw}}" class="layui-btn layui-btn-xs">下一页</a>
+                    <a href="?page={{ doctemps.next_page_number }}&kw={{doctemps.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">下一页</a>
+                {% else %}
+                    <a class="layui-btn layui-btn-xs layui-btn-disabled">下一页</a>
                 {% endif %}
-            </span>
         </div>
     </div>
 {% endblock %}

template/app_doc/manage_image.html

@@ -15,9 +15,9 @@
                     <!--<input type="text" name="kw" id="kw"  placeholder="搜索图片" autocomplete="off" class="layui-input">-->
                 <!--</div>-->
                 <!--<button class="layui-btn" type="submit">搜索</button>-->
-                <button class="layui-btn" type="button" id="upload_img">上传图片</button>
-                <button class="layui-btn" type="button" onclick="createImgGroup()">新建分组</button>
-                <a class="layui-btn" href="{% url 'manage_img_group' %}">分组管理</a>
+                <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" id="upload_img"><i class="layui-icon layui-icon-upload"></i>上传图片</button>
+                <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" onclick="createImgGroup()"><i class="layui-icon layui-icon-addition"></i>新建分组</button>
+                <a class="layui-btn layui-btn-normal layui-btn-sm" href="{% url 'manage_img_group' %}">分组管理</a>
             </div>
         </form>
 
@@ -50,21 +50,27 @@
             {% endfor %}
         </ul>
     </div>
-    <!-- 分页 -->
     <hr>
+    <!-- 分页 -->
     <div class="layui-row">
-        <div class="pagination">
-            <span class="step-links">
+        <div class="layui-box layui-laypage layui-laypage-default">
+                <!-- 上一页 -->
                 {% if images.has_previous %}
-                    <a href="?page={{ images.previous_page_number }}&group={{images.group}}" class="layui-btn layui-btn-xs">上一页</a>
+                    <a href="?page={{ images.previous_page_number }}&group={{images.group}}" class="layui-btn layui-btn-xs layui-btn-normal">上一页</a>
+                {% else %}
+                    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">上一页</a>
                 {% endif %}
-                <span class="current">
-                    当前页： {{ images.number }} 共 {{ images.paginator.num_pages }} 页
+                <!-- 当前页 -->
+                <span class="layui-laypage-curr">
+                    <em class="layui-laypage-em"></em>
+                    <em>{{ images.number }}/{{ images.paginator.num_pages }}</em>
                 </span>
+                <!-- 下一页 -->
                 {% if images.has_next %}
-                    <a href="?page={{ images.next_page_number }}&group={{images.group}}" class="layui-btn layui-btn-xs">下一页</a>
+                    <a href="?page={{ images.next_page_number }}&group={{images.group}}" class="layui-btn layui-btn-xs layui-btn-normal">下一页</a>
+                {% else %}
+                    <a class="layui-btn layui-btn-xs layui-btn-disabled">下一页</a>
                 {% endif %}
-            </span>
         </div>
     </div>
 {% endblock %}

template/app_doc/manage_image_group.html

@@ -21,8 +21,8 @@
         </div>
         </form>
     </div>
-    <div class="layui-row" lay-skin="line">
-        <table class="layui-table"  id="doctemp-list" lay-skin="">
+    <div class="layui-row">
+        <table class="layui-table"  id="doctemp-list" lay-skin="" lay-even>
             <colgroup>
             <col width="200">
             <col width="200">
@@ -42,8 +42,12 @@
           <td>{{ group.group_name }}</td>
           <td>{{ group.id | img_group_cnt }}</td>
           <td>
-              <a href="javascript:void(0);"  onclick="modifyGroup('{{group.id}}')" class="layui-btn layui-btn-xs">修改</a>
-              <a href="javascript:void(0);" onclick="delGroup('{{group.id}}');" class="layui-btn layui-btn-xs">删除</a>
+              <a href="javascript:void(0);"  onclick="modifyGroup('{{group.id}}')" class="layui-btn layui-btn-xs layui-btn-normal">
+                <i class="layui-icon layui-icon-edit"></i>修改
+            </a>
+              <a href="javascript:void(0);" onclick="delGroup('{{group.id}}');" class="layui-btn layui-btn-xs layui-btn-normal">
+                <i class="layui-icon layui-icon-delete"></i>删除
+            </a>
           </td>
         </tr>
         {% endfor %}

template/app_doc/manage_project.html

@@ -14,14 +14,14 @@
             <div class="layui-input-inline">
                 <input type="text" name="kw" id="kw" placeholder="输入文集内容" autocomplete="off" class="layui-input">
             </div>
-            <button class="layui-btn" type="submit">搜索</button>
-            <button class="layui-btn" onclick="createProject()" type="button">新建文集</button>
-            <a class="layui-btn" href="{% url 'manage_pro_colla_self' %}">我协作的文集</a>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" type="submit"><i class="layui-icon layui-icon-search" ></i>搜索</button>
+            <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="createProject()" type="button"><i class="layui-icon layui-icon-addition"></i>新建文集</button>
+            <a class="layui-btn layui-btn-normal layui-btn-sm" href="{% url 'manage_pro_colla_self' %}"><i class="layui-icon layui-icon-group"></i>我协作的文集</a>
         </div>
         </form>
     </div>
-    <div class="layui-row" lay-skin="line">
-        <table class="layui-table"  id="doctemp-list" lay-skin="">
+    <div class="layui-row">
+        <table class="layui-table"  id="doctemp-list" lay-skin="" lay-size="" lay-even>
             <colgroup>
             <col width="100">
             <col width="200">
@@ -29,7 +29,7 @@
             <col width="100">
             <col width="50">
             <col width="100">
-            <col width="100">
+            <col width="60">
             <col width="150">
             </colgroup>
       <thead>
@@ -62,22 +62,27 @@
           <td>
               <div class="layui-input-inline">
               {% if pro.role == 0 %}
-                  <i class="layui-icon layui-icon-circle"></i> 公开 <a href="{% url 'modify_pro_role' pro.id %}"  title="修改文集权限"><i class="layui-icon layui-icon-edit"></i></a>
+                  <i class="layui-icon layui-icon-circle-dot" style="color: #01AAED;"></i> 公开 <a href="{% url 'modify_pro_role' pro.id %}"  title="修改文集权限"><i class="layui-icon layui-icon-edit"></i></a>
               {% elif pro.role == 1 %}
-                  <i class="layui-icon layui-icon-menu-fill"></i> 私密 <a href="{% url 'modify_pro_role' pro.id %}"  title="修改文集权限"><i class="layui-icon layui-icon-edit"></i></a>
+                  <i class="layui-icon layui-icon-password"></i> 私密 <a href="{% url 'modify_pro_role' pro.id %}"  title="修改文集权限"><i class="layui-icon layui-icon-edit"></i></a>
               {% elif pro.role == 2 %}
-                  <i class="layui-icon layui-icon-group"></i> 指定用户可见 <a href="{% url 'modify_pro_role' pro.id %}"  title="修改文集权限"><i class="layui-icon layui-icon-edit"></i></a>
+                  <i class="layui-icon layui-icon-group"></i> 指定用户 <a href="{% url 'modify_pro_role' pro.id %}"  title="修改文集权限"><i class="layui-icon layui-icon-edit"></i></a>
               {% elif pro.role == 3 %}
-                  <i class="layui-icon layui-icon-key"></i> 访问码可见 <a href="{% url 'modify_pro_role' pro.id %}"  title="修改文集权限"><i class="layui-icon layui-icon-edit"></i></a>
+                  <i class="layui-icon layui-icon-key"></i> 访问码 <a href="{% url 'modify_pro_role' pro.id %}"  title="修改文集权限"><i class="layui-icon layui-icon-edit"></i></a>
               {% endif %}
               </div>
           </td>
             <td>{{ pro.id | project_collaborator_cnt }} <a href="{% url 'manage_pro_colla' pro.id %}"  title="管理文集协作"><i class="layui-icon layui-icon-edit"></i></a></td>
           <td>
-              <!--<a href="{% url 'pro_index' pro_id=pro.id %}"  target="_blank" class="layui-btn layui-btn-normal layui-btn-xs">查看</a>-->
-              <a href="javascript:void(0);" onclick="modifyProject('{{pro.id}}','{{pro.name}}','{{pro.intro}}')" class="layui-btn layui-btn-xs">修改</a>
-              <a href="javascript:void(0);" onclick="delProject('{{pro.id}}');" class="layui-btn layui-btn-xs">删除</a>
-              <a href="javascript:void(0);" onclick="reportMd('{{pro.id}}')" class="layui-btn layui-btn-xs">导出</a>
+              <a href="javascript:void(0);" onclick="modifyProject('{{pro.id}}','{{pro.name}}','{{pro.intro}}')" class="layui-btn layui-btn-xs layui-btn-normal">
+                <i class="layui-icon layui-icon-edit"></i>修改
+            </a>
+              <a href="javascript:void(0);" onclick="delProject('{{pro.id}}');" class="layui-btn layui-btn-xs layui-btn-normal">
+                <i class="layui-icon layui-icon-delete"></i>删除
+            </a>
+              <a href="javascript:void(0);" onclick="reportMd('{{pro.id}}')" class="layui-btn layui-btn-xs layui-btn-normal">
+                <i class="layui-icon layui-icon-export"></i>导出
+            </a>
           </td>
         </tr>
         {% endfor %}
@@ -86,18 +91,24 @@
     </div>
     <!-- 分页 -->
     <div class="layui-row">
-        <div class="pagination">
-            <span class="step-links">
+        <div class="layui-box layui-laypage layui-laypage-default">
+                <!-- 上一页 -->
                 {% if pros.has_previous %}
-                    <a href="?page={{ pros.previous_page_number }}&kw={{pros.kw}}" class="layui-btn layui-btn-normal layui-btn-xs">上一页</a>
+                    <a href="?page={{ pros.previous_page_number }}&kw={{pros.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">上一页</a>
+                {% else %}
+                    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">上一页</a>
                 {% endif %}
-                <span class="current">
-                    当前页： {{ pros.number }} 共 {{ pros.paginator.num_pages }} 页
+                <!-- 当前页 -->
+                <span class="layui-laypage-curr">
+                    <em class="layui-laypage-em"></em>
+                    <em>{{ pros.number }}/{{ pros.paginator.num_pages }}</em>
                 </span>
+                <!-- 下一页 -->
                 {% if pros.has_next %}
-                    <a href="?page={{ pros.next_page_number }}&kw={{pros.kw}}" class="layui-btn layui-btn-normal layui-btn-xs">下一页</a>
+                    <a href="?page={{ pros.next_page_number }}&kw={{pros.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">下一页</a>
+                {% else %}
+                    <a class="layui-btn layui-btn-xs layui-btn-disabled">下一页</a>
                 {% endif %}
-            </span>
         </div>
     </div>
 {% endblock %}

template/app_doc/modify_doc.html

@@ -1,7 +1,7 @@
-{% extends 'app_doc/create_base.html' %}
+{% extends 'app_doc/create_base_2.html' %}
 {% load staticfiles %}
 {% block title %}修改文档{% endblock %}
-{% block subtitle %}修改文档{% endblock %}
+{% block editor_type %}修改文档{% endblock %}
 
 {% block custom_style %}
 <style>
@@ -17,54 +17,88 @@
     </style>
 {% endblock %}
 
-{% block content %}
-    <div class="create-doc-form">
-        <div class="layui-form">
+{% block head_toolbar %}
+<a class="btn pull-left" aria-label="" href="{% url 'create_doc' %}?pid={{project.id}}" target="_blank">
+    <i class="fa fa-plus-square"></i> <span class="layui-hide-xs">新建文档</span>
+</a>
+<a class="btn pull-left" aria-label="" href="{% url 'manage_doc' %}?pid={{project.id}}" target="_blank">
+    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理文档</span>
+</a>
+<a class="btn pull-left" aria-label="" href="{% url 'manage_project' %}" target="_blank">
+    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理文集</span>
+</a>
+{% endblock %}
 
-            <!-- 标题 -->
-            <div>
-                <!--<label class="layui-form-label" style="padding-left:0px;padding-right:0px;"><i class="layui-icon layui-icon-edit"></i> 文档标题</label>-->
-                <div class="layui-input-block" style="margin-left:0;">
-                  <input type="text" name="doc-name" id="doc-name" required lay-verify="required" placeholder="请输入文档标题" value="{{ doc.name }}" class="layui-input">
-                </div>
-            </div><br>
+{% block left_opera %}
+<div class="layui-form" style="padding:0 10px 10px 10px;">
+    <div class="layui-row">
+        <div class="doc-form-label" style="margin-bottom: 10px;">
+            {% if doc.status == 0 %}
+            <strong>*当前文档状态为：草稿</strong>
+            {% elif doc.status == 1 %}
+            <strong>*当前文档状态为：已发布 </strong><a class="layui-btn layui-btn-xs layui-btn-normal" target="_blank" href="{% url 'doc' doc.top_doc doc.id %}">查看文档</a>
+            {% endif %}
+        </div>
 
-            <label class="doc-form-label">文集</label>
-            <div class="layui-input-inline">
-              <select name="pro_id" lay-verify="required"  lay-filter="project" id="project" disabled>
+        <div class="layui-col-md12" style="margin-bottom: 10px;">
+            <label class="doc-form-label" style="margin-right:0px;">
+                <button class="layui-btn layui-btn-normal layui-btn-sm" id="sel-doctemp" title="插入模板内容">
+                    <i class="fa fa-clipboard"></i> 模板
+                </button>
+            </label>
+
+            <label class="doc-form-label" style="margin-right:0px;">
+                <input type="file" id="insert-local-file" onchange="insertLocalFile(this)" style="display:none;">
+                <button class="layui-btn layui-btn-normal layui-btn-sm" id="sel-local" onclick="selectLocalFile()" title="插入本地文本文件内容">
+                    <i class="fa fa-clipboard"></i> 文本
+                </button>
+            </label>
+
+            <label class="doc-form-label">
+                <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="saveDoc()" title="保存当前内容为草稿文档">
+                    <i class="fa fa-save"></i> 保存
+                </button>
+            </label>
+            <label class="doc-form-label">
+                <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="createDoc()" id="create_doc" title="发布当前内容">
+                    <i class="fa fa-save"></i> 发布
+                </button>
+            </label>
+        </div>
+
+        <div class="layui-col-md12" style="margin-bottom: 10px;">
+            <div class="layui-input-inblock">
+              <select name="pro_id" lay-verify="required"  lay-filter="project" id="project">
                 <option value="{{ project.id }}">{{ project.name }}</option>
               </select>
             </div>
+        </div>
 
-            <!--<label class="doc-form-label">上级文档</label>-->
-            <div class="layui-input-inline">
-              <select name="parent_id" lay-verify="required" id="parent-doc">
-                  <option value="0">选择上级文档</option>
-              </select>
+        <div class="layui-row">
+            <div class="layui-col-md12" style="margin-bottom: 10px;">
+                <span>点击文档树选择上级（可选）或</span>
+                <button class="layui-btn layui-btn-xs layui-btn-normal" id="clearParentDoc">不设上级</button>
+                <input type="text" id="parent-doc" hidden> 
             </div>
-
-            <label class="doc-form-label">排序</label>
-            <div class="layui-input-inline">
-              <input class="layui-input" placeholder="99" style="width:50px;" name="sort" id="sort" value="{{doc.sort}}"/>
+            <div class="layui-col-md12">
+                <input type="number" class="layui-input" placeholder="输入文档排序值，默认99" id="sort" value="{{doc.sort}}">
             </div>
+            
+        </div>
+        <div class="layui-col-md12" id="doc-tree"></div>
+        
+    </div>
+</div>
+{% endblock %}
 
-            <label class="doc-form-label">
-                <button class="layui-btn layui-btn-primary layui-btn-sm" id="sel-doctemp">插入模板</button>
-            </label>
-            <label class="doc-form-label">
-                <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="saveDoc()">保存草稿</button>
-            </label>
-            <label class="doc-form-label">
-                <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="createDoc()">发布文档</button>
-            </label>
-            <label class="doc-form-label">
-                {% if doc.status == 0 %}
-                <span>*当前状态：草稿</span>
-                {% elif doc.status == 1 %}
-                <span>*当前状态：已发布</span>
-                {% endif %}
-            </label>
-
+{% block content %}
+    <div class="create-doc-form">
+        <div class="layui-form">
+            <!-- 标题 -->
+            <div class="layui-input-block" style="margin-left:0;">
+                <input type="text" name="doc-name" id="doc-name" required lay-verify="required" placeholder="请输入文档标题" value="{{ doc.name }}" class="layui-input">
+            </div>
+            <br>
         </div>
     </div>
     <div id="editor-md">
@@ -75,21 +109,49 @@
 
 {% block custom_script %}
     <script>
-        //获取上级文档信息
+        //获取文档数和上级文档信息
         $(function(){
             var doc_parent_id = {{ doc.parent_doc }};
-           $.post('{% url 'get_pro_doc' %}',{'pro_id':$("#project").val()},function(r){
+            $.post("{% url 'get_pro_doc_tree' %}",{'pro_id':$("#project").val()},function(r){
                 if(r.status){
-                    //解析文集的下级文档
-                    for(let i in r.data) {
-                        console.log(doc_parent_id,r.data[i][2])
-                        if(r.data[i][0] == doc_parent_id){
-                            $("#parent-doc").append("<option value='"+r.data[i][0]+"' selected>"+r.data[i][3]+r.data[i][1]+"</option>")
-                        }else{
-                            $("#parent-doc").append("<option value='"+r.data[i][0]+"'>"+r.data[i][3]+r.data[i][1]+"</option>")
+                    var doc_tree = tree.render({
+                        elem:"#doc-tree",
+                        id:'docTree',
+                        onlyIconControl:true,
+                        data:r.data,
+                        click: function(obj){
+                            if(obj.data.level != 3){
+                                console.log(obj.data.id,doc_parent_id)
+                                if(obj.data.id != {{ doc.id }} ){
+                                    $('#parent-doc').val(obj.data.id);// 设置上级文档
+                                    $("div.layui-tree-set").each(function(i){
+                                        var $me = $(this)
+                                        if($me.data('id') == obj.data.id){
+                                            // console.log('点击了')
+                                            $me.find('span.layui-tree-txt').first().addClass('selected-parent-doc')
+                                        }else{
+                                            $me.find('span.layui-tree-txt').first().removeClass('selected-parent-doc')
+                                        }
+                                    });
+                                }else{
+                                    layer.msg("不可选择自己作为上级")
+                                };
+                                
+                            }else{
+                                layer.msg("第三级文档不能作为上级文档")
+                            };
+                            
                         }
-                    };
-                    form.render();
+                    });
+                    $('#parent-doc').val(doc_parent_id);// 设置上级文档
+                    $("div.layui-tree-set").each(function(i){
+                        var $me = $(this)
+                        if($me.data('id') == doc_parent_id){
+                            $me.find('span.layui-tree-txt').first().addClass('selected-parent-doc')
+                        }else{
+                            $me.find('span.layui-tree-txt').first().removeClass('selected-parent-doc')
+                        }
+                    });
                 }else{
                     layer.msg("获取下级文档失败！")
                 }
@@ -136,6 +198,7 @@
                 if(r.status){
                     //修改成功
                     layer.msg('保存成功',function(){
+                        md_changed = false;
                         window.location.href = "{% url 'modify_doc' doc.id %}";
                     });
                 }else{
@@ -192,7 +255,7 @@
           <td>{{ temp.name }}</td>
           <td>{{ temp.create_time }}</td>
           <td>
-              <a href="javascript:void(0);" onclick="insertTemp('{{temp.id}}');">选择模板</a>
+              <a href="javascript:void(0);" class="layui-btn layui-btn-normal layui-btn-sm" onclick="insertTemp('{{temp.id}}');">选择模板</a>
 {#              <a href="javascript:void(0);" onclick="modifyTemp();">修改</a>#}
 {#              <a href="javascript:void(0);" onclick="delTemp();">删除</a>#}
           </td>

template/app_doc/modify_doctemp.html

@@ -1,18 +1,52 @@
-{% extends 'app_doc/create_base.html' %}
+{% extends 'app_doc/create_base_2.html' %}
 {% load staticfiles %}
 {% block title %}修改文档模板{% endblock %}
-{% block subtitle %}修改文档模板{% endblock %}
+{% block editor_type %}修改文档模板{% endblock %}
+
+{% block head_toolbar %}
+<a class="btn pull-left" aria-label="" href="{% url 'create_doctemp' %}?pid={{project.id}}" target="_blank">
+    <i class="fa fa-plus-square"></i> <span class="layui-hide-xs">新建模板</span>
+</a>
+<a class="btn pull-left" aria-label="" href="{% url 'manage_doctemp' %}?pid={{project.id}}" target="_blank">
+    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理模板</span>
+</a>
+<a class="btn pull-left" aria-label="" href="{% url 'manage_project' %}" target="_blank">
+    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理文集</span>
+</a>
+{% endblock %}
+
+{% block left_opera %}
+<div class="layui-form" style="padding: 10px;">
+    <div class="layui-row">
+        <div class="layui-col-md12" style="margin-bottom: 10px;">
+            <label class="doc-form-label">
+                <button class="layui-btn layui-btn-normal layui-btn-fluid" onclick="modifyDocTemp()">
+                    <i class="fa fa-save"></i> 保存模板
+                </button>
+            </label>
+        </div>
+    </div>
+    <!-- 已有模板 -->
+    <div class="layui-row">
+        <div class="layui-card">
+            <div class="layui-card-header">现有模板</div>
+            <div class="layui-card-body">
+                {% for temp in doctemps %}
+                    <li><a href="{% url 'modify_doctemp' temp.id %}" target="_blank" title="点击查看修改《{{temp.name}}》的内容"><i class="fa fa-file"></i> {{temp.name}}</a></li>
+                {% endfor %}
+            </div>
+          </div>
+    </div>
+</div>
+{% endblock %}
+
 
 {% block content %}
     <div class="create-doc-form">
-        <div class="layui-form">
-            <label class="layui-form-label">模板标题</label>
-            <div class="layui-input-inline">
+        <div class="layui-form" style="padding-bottom:10px;">
+            <div class="layui-input-block" style="margin-left:0px;">
               <input type="text" name="doc-name" id="doctemp-name" required lay-verify="required" value="{{doctemp.name}}" placeholder="请输入模板名称" autocomplete="off" class="layui-input">
             </div>
-            <label class="doc-form-label">
-                <button class="layui-btn layui-btn-normal" onclick="modifyDocTemp()">保存</button>
-            </label>
         </div>
     </div>
     <div id="editor-md">
@@ -34,6 +68,7 @@
                 if(r.status){
                     //修改成功
                     layer.msg('修改成功，即将跳转',function(){
+                        md_changed = false;
                         window.location.href = "{% url 'manage_doctemp' %}";
                     });
                 }else{

template/app_doc/pro_list.html

@@ -14,21 +14,37 @@
     <link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
     <link href="{% static 'mrdoc.css' %}?version={{mrdoc_version}}" rel="stylesheet">
     <link rel="icon" href="{% static 'favicon_16.png' %}"/>
+    <style>
+        .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{
+            background-color: #333 !important;
+        }
+        .layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{
+            background-color: #333 !important;
+        }
+        /* layui分页组件样式 */
+        .layui-laypage .layui-laypage-curr .layui-laypage-em{
+            background-color: #333 !important;
+        }
+    </style>
 </head>
 <body class="layui-container">
 <!-- 页头 -->
 {% include 'app_doc/head_base.html' %}
 <!-- 页头结束 -->
 
+{% if kw != '' %}
+    <div style="text-align: center;margin-top: 5px;">符合“<span style="color: #FF5722;font-weight: 700;">{{kw}}</span>”的搜索结果：</div>
+{% endif %}
+
 <!-- 主体 -->
 <div class="layui-container project-list-content" style="display:flex;flex-wrap:wrap;">
     <!-- 遍历文集列表 -->
     {% load project_filter %}
-    {% for p in project_list %}
-        <div class="project-item layui-col-md3 layui-col-xs12">
+    {% for p in projects %}
+        <div class="layui-col-md3 layui-col-xs12 project-item">
             <a href="{% url 'pro_index' p.id %}" title="{{p.name}}">
                 <div class="layui-card">
-                    <div class="layui-card-header" style="overflow:hidden;white-space: nowrap;text-overflow: ellipsis;">
+                    <div class="layui-card-header" style="overflow:hidden;white-space: nowrap;text-overflow: ellipsis;color: black;">
                         {% if p.role == 1 %}
                         <strong><i class="layui-icon layui-icon-password"></i> {{ p.name }}</strong>
                         {% elif p.role == 2 %}
@@ -62,6 +78,28 @@
     {% endif %}
 </div>
 <!-- 主体结束 -->
+<!-- 分页 -->
+<div class="layui-row project-list-page" style="text-align: center;">
+    <div class="layui-box layui-laypage layui-laypage-default">
+            <!-- 上一页 -->
+            {% if projects.has_previous %}
+                <a href="?page={{ projects.previous_page_number }}&kw={{projects.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">上一页</a>
+            {% else %}
+                <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">上一页</a>
+            {% endif %}
+            <!-- 当前页 -->
+            <span class="layui-laypage-curr">
+                <em class="layui-laypage-em"></em>
+                <em>{{ projects.number }}/{{ projects.paginator.num_pages }}</em>
+            </span>
+            <!-- 下一页 -->
+            {% if projects.has_next %}
+                <a href="?page={{ projects.next_page_number }}&kw={{projects.kw}}" class="layui-btn layui-btn-xs layui-btn-normal">下一页</a>
+            {% else %}
+                <a class="layui-btn layui-btn-xs layui-btn-disabled">下一页</a>
+            {% endif %}
+    </div>
+</div>
 
 <!-- 页脚 -->
 {% include 'app_doc/foot_base.html' %}
@@ -184,7 +222,7 @@
                 console.log($(".layui-header").height()+$(".layui-container").height())
                 console.log($(window).height())
                 //如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位
-                if(($(".layui-header").height()+$(".project-list-content").height()) < $(window).height()) {
+                if(($(".layui-header").height() + $(".project-list-content").height() + $(".project-list-page").height()) < $(window).height()) {
                     console.log("页脚置底")
                     $(".layui-footer").css({ position: "absolute",left:"0" }).stop().css({top:footerTop});
                 }

template/app_doc/project.html

@@ -9,7 +9,7 @@
     {% if request.user == project.create_user or colla_user > 0 %}
         <span class="btn pull-left">|</span>
         <a class="btn pull-left" href="{% url 'create_doc' %}?pid={{project.id}}" target="_blank">
-            <i class="fa fa-edit"></i> 添加文档
+            <i class="fa fa-plus-square"></i> 添加
         </a>
     {% endif %}
 {% endblock %}