From 946e4732e1ec94387667579af69b6bf33f1ef057 Mon Sep 17 00:00:00 2001
From: yangjian <zmister@qq.com>
Date: Thu, 26 Nov 2020 20:57:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E7=90=86=E5=87=A0=E4=B8=AAcss?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app_doc/views_search.py              |  88 ++++++++
 static/mrdoc/mrdoc-docs.css          |  92 ++++++++
 static/mrdoc/mrdoc-editor.css        | 104 +++++++++
 static/mrdoc/mrdoc-search-result.css | 101 +++++++++
 static/mrdoc/mrdoc-search.css        | 314 +++++++++++++++++++++++++++
 5 files changed, 699 insertions(+)
 create mode 100644 app_doc/views_search.py
 create mode 100644 static/mrdoc/mrdoc-docs.css
 create mode 100644 static/mrdoc/mrdoc-editor.css
 create mode 100644 static/mrdoc/mrdoc-search-result.css
 create mode 100644 static/mrdoc/mrdoc-search.css

diff --git a/app_doc/views_search.py b/app_doc/views_search.py
new file mode 100644
index 0000000..208812e
--- /dev/null
+++ b/app_doc/views_search.py
@@ -0,0 +1,88 @@
+# coding:utf-8
+# @文件: views_search.py
+# @创建者：州的先生
+# #日期：2020/11/22
+# 博客地址：zmister.com
+
+
+# from haystack.generic_views import SearchView
+from django.db.models import Q
+from haystack.views import SearchView
+from haystack.query import SearchQuerySet
+from app_doc.models import *
+import datetime
+
+# 文档搜索 - 基于Haystack全文搜索
+class DocSearchView(SearchView):
+    results_per_page = 10
+
+    def __call__(self, request):
+        self.request = request
+        date_type = self.request.GET.get('d_type', 'recent')
+        date_range = self.request.GET.get('d_range', 'all')  # 时间范围，默认不限，all
+
+        # 处理时间范围
+        if date_type == 'recent':
+            if date_range == 'recent1':  # 最近1天
+                start_date = datetime.datetime.now() - datetime.timedelta(days=1)
+            elif date_range == 'recent7':  # 最近7天
+                start_date = datetime.datetime.now() - datetime.timedelta(days=7)
+            elif date_range == 'recent30':  # 最近30天
+                start_date = datetime.datetime.now() - datetime.timedelta(days=30)
+            elif date_range == 'recent365':  # 最近一年
+                start_date = datetime.datetime.now() - datetime.timedelta(days=365)
+            else:
+                start_date = datetime.datetime.strptime('1900-01-01', '%Y-%m-%d')
+            end_date = datetime.datetime.now()
+        elif date_type == 'day':
+            try:
+                date_list = date_range.split('|')
+                start_date = datetime.datetime.strptime(date_list[0], '%Y-%m-%d')
+                end_date = datetime.datetime.strptime(date_list[1], '%Y-%m-%d')
+            except:
+                start_date = datetime.datetime.now() - datetime.timedelta(days=1)
+                end_date = datetime.datetime.now()
+
+        # 是否时间筛选
+        if date_range == 'all':
+            is_date_range = False
+        else:
+            is_date_range = True
+
+        # 是否认证
+        if self.request.user.is_authenticated:
+            is_auth = True
+        else:
+            is_auth = False
+
+        # 获取可搜索的文集列表
+        if is_auth:
+            colla_list = [i.project.id for i in
+                          ProjectCollaborator.objects.filter(user=self.request.user)]  # 用户的协作文集
+            open_list = [i.id for i in Project.objects.filter(
+                Q(role=0) | Q(create_user=self.request.user)
+            )]  # 公开文集
+
+            view_list = list(set(open_list).union(set(colla_list)))  # 合并上述两个文集ID列表
+        else:
+            view_list = [i.id for i in Project.objects.filter(role=0)] # 公开文集
+
+        sqs = SearchQuerySet().filter(
+            top_doc__in=view_list
+        ).filter(
+            modify_time__gte=start_date,
+            modify_time__lte=end_date).order_by('-modify_time')
+        self.form = self.build_form(form_kwargs={'searchqueryset':sqs})
+        self.query = self.get_query()
+        self.results = self.get_results()
+        return self.create_response()
+
+    def extra_context(self):
+        context = {
+            'date_range':self.request.GET.get('d_range', 'all')
+        }
+        return context
+
+
+
+
diff --git a/static/mrdoc/mrdoc-docs.css b/static/mrdoc/mrdoc-docs.css
new file mode 100644
index 0000000..a24629e
--- /dev/null
+++ b/static/mrdoc/mrdoc-docs.css
@@ -0,0 +1,92 @@
+        /*一级无序li显示实心圆点*/
+        .doc-content ul li{
+            list-style:disc;
+        }
+        /*二级无序li显示空心圆点*/
+        .doc-content ul > li > ul > li{
+            list-style-type: circle;
+        }
+        /*有序li显示数字*/
+        .doc-content ol li{
+            list-style-type: decimal;
+        }
+        .doc-content ol ol ul,.doc-content ol ul ul,.doc-content ul ol ul,.doc-content ul ul ul {
+            list-style-type: square;
+        }
+        /* 三级及以下无序li显示小方块 */
+        .doc-content ul ul ul li{
+            list-style-type: square;
+        }
+        /* 下拉目录隐藏li样式 */
+        .editormd-toc-menu ul.markdown-toc-list li{
+            /*list-style:none;*/
+        }
+        /* 弹出框文档目录样式 */
+        ul.markdown-toc-list{
+            list-style-position:inside;
+        }
+        ul.markdown-toc-list li{
+            list-style: none!important;
+            line-height: 24px;
+        }
+        ul.markdown-toc-list > li > ul > li,ul.markdown-toc-list > li > ul li{
+            padding-left:15px;
+        }
+        ul.markdown-toc-list a{
+            /* text-decoration: underline!important; */
+        }
+        /* 块级代码和行内代码去除边框 */
+        .markdown-body p code{
+            border:none;
+        }
+        /* HTML预览样式 */
+        .markdown-body h1{ 
+            font-size: 1.7em;
+        }
+        .markdown-body h2{
+            font-size: 1.5em;
+        }
+        .markdown-body h3{
+            font-size: 1.25em;
+        }
+        .markdown-body h4{
+            font-size: 1em;
+        }
+        .markdown-body h5{
+            font-size: .875em;
+        }
+        .markdown-body h6{
+            font-size: .85em;
+        }
+        {% if img_scale %}
+        .markdown-body p img{
+            max-width: 350px;
+        }
+        {% endif %}
+        #url_qrcode img{
+            margin: auto;
+        }
+        /* 文档代码块样式 */
+        ol.linenums li{ 
+            width: max-content;
+        }
+        pre.linenums{
+            max-height: 500px;
+        }
+        li.L1, li.L3, li.L5, li.L7, li.L9 {
+            background: none !important;
+        }
+
+        /* layui弹出框颜色 */
+        .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{
+            border-bottom: 2px solid #333;
+        }
+        .layui-tab-brief>.layui-tab-title .layui-this{
+            color: #333;
+        }
+        /* 覆盖vditor样式 */
+        .vditor-outline__item{
+            padding: 0;
+            padding-bottom: 5px;
+            color: #333;
+        }
\ No newline at end of file
diff --git a/static/mrdoc/mrdoc-editor.css b/static/mrdoc/mrdoc-editor.css
new file mode 100644
index 0000000..7824c46
--- /dev/null
+++ b/static/mrdoc/mrdoc-editor.css
@@ -0,0 +1,104 @@
+        /* 编辑器图标样式 */
+        .editormd-menu i{
+            color: #333;
+            font-size: 16px;
+        }
+        ul.editormd-menu{
+            margin-bottom: 0;
+        }
+        /* 编辑器预览列表样式 */
+        .markdown-body ul li{
+            list-style:disc;
+        }
+        .markdown-body ul > li > ul > li{
+            list-style-type: circle;
+        }
+        .markdown-body ol li{
+            list-style-type: decimal;
+        }
+        .markdown-body ol ol ul,.markdown-body ol ul ul,.markdown-body ul ol ul,.markdown-body ul ul ul li{
+            list-style-type: square;
+        }
+        /* 选择上级文档样式 */
+        .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: #2176ff !important;
+        }
+        .layui-form-select dl dd.layui-this{
+            background-color: #2176ff !important;
+        }
+        /* layui单选样式 */
+        .layui-form-radio>i:hover, .layui-form-radioed>i{
+            color: #2176ff;
+        }
+        /* HTML预览样式 */
+        .markdown-body h1{
+            font-size: 1.7em;
+        }
+        .markdown-body h2{
+            font-size: 1.5em;
+        }
+        .markdown-body h3{
+            font-size: 1.25em;
+        }
+        .markdown-body h4{
+            font-size: 1em;
+        }
+        .markdown-body h5{
+            font-size: .875em;
+        }
+        .markdown-body h6{
+            font-size: .85em;
+        }
+        /* 编辑器行号宽度 */
+        .CodeMirror-linenumber{
+            width: auto !important;
+        }
+        li.L1, li.L3, li.L5, li.L7, li.L9 {
+            background: none !important;
+        }
+        /* layui 折叠面板 边框颜色 - 用在左侧文集结构 */
+        .layui-badge-rim, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-layedit, .layui-layedit-tool, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea{
+            border-color: #f8f8f8;
+        }
+        .layui-colla-content{
+            padding: 0px;
+        }
+        /* 预览代码宽度 */
+        ol.linenums li{
+            width: max-content;
+        }
+        #doc-tree{
+            margin-bottom: 5px;
+        }
\ No newline at end of file
diff --git a/static/mrdoc/mrdoc-search-result.css b/static/mrdoc/mrdoc-search-result.css
new file mode 100644
index 0000000..167e32c
--- /dev/null
+++ b/static/mrdoc/mrdoc-search-result.css
@@ -0,0 +1,101 @@
+.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{
+    background-color: #0885ff !important;
+}
+.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{
+    background-color: #0885ff !important;
+}
+/* layui分页组件样式 */
+.layui-laypage .layui-laypage-curr .layui-laypage-em{
+    background-color: #0885ff !important;
+}
+.index-control .layui-input{
+    height: 25px;
+    border: none;
+}
+.index-control .layui-form-select dl {
+    top: 30px;
+}
+.index-control .layui-form-item{
+    margin-bottom: 0px;
+}
+/* 文集列表样式 */
+.project-item-list{
+    /* float: left; */
+    min-width: 0;
+    width: 100vw;
+    height: 120px;
+    /* 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);
+}
+/* 搜索类型 */
+a.search_type{
+    color: #999;
+    margin-left: 15px;
+    font-size: 16px;
+    padding-bottom: 5px;
+}
+a.search_type:hover{
+    color: #333;
+}
+/* 当前搜索类型链接样式 */
+.current_search_type{
+    color: #333 !important;
+    border-bottom: 2px solid#007fff !important;
+}
+/* 搜索结果标题 */
+.search_result_title{
+    color: #00c;
+    font-weight: 400;
+    font-size: medium;
+    line-height:26px;
+}
+.search_result_title:hover{
+    color: #00c;
+}
+/* 搜索结果简介 */
+.search_result_pre{
+    font-size: 13px;
+    color: #333;
+    line-height: 20px;
+    word-break: break-word;
+}
+/* 搜索结果归属 */
+.search_result_info a{
+    color: green;
+}
+/* 时间筛选下拉框 */
+.layui-form-select dl dd.layui-this{
+    background-color:#0885ff;
+}
+
+/* 搜索词高亮 */
+.highlighted{
+    color:#c00;
+}
+
+@media screen and (min-width: 1200px){
+    .layui-container {
+        width: 970px;
+    }
+}
+
+
+/* 移动端筛选控制栏样式 */
+@media screen and (max-width: 768px){
+    /* 控制栏样式 */
+    .index-control .layui-form-item .layui-inline{
+        display: -webkit-inline-box;
+    }
+    .index-control .layui-form-item .layui-input-inline{
+        display: -webkit-inline-box;
+        float: none;
+        left: -3px;
+        /* width: auto; */
+        margin: 0;
+    }
+
+}
diff --git a/static/mrdoc/mrdoc-search.css b/static/mrdoc/mrdoc-search.css
new file mode 100644
index 0000000..ab3a5d4
--- /dev/null
+++ b/static/mrdoc/mrdoc-search.css
@@ -0,0 +1,314 @@
+* {
+    padding: 0;
+    margin: 0;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    background: #fff;
+}
+
+html {
+    font-family: 'Noto Sans SC Sliced', PingFangSC-Light, Microsoft YaHei UI, Microsoft YaHei, helvetica, sans-serif;
+    font-weight: 300;
+    color: #000;
+}
+
+form,
+input,
+button {
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+    background: none;
+}
+
+input::-webkit-input-placeholder {
+    color: #ccc;
+    letter-spacing: 2px;
+    font-size: 16px;
+}
+
+ul,
+li {
+    display: block;
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+}
+
+#content {
+    width: 100%;
+    height: 100%;
+}
+
+.con {
+    width: 100%;
+    transition: 1s all;
+    margin: auto;
+    min-width: 320px;
+    height: 380px;
+    position: absolute;
+    left: 0;
+    top: -100px;
+    right: 0;
+    bottom: 0;
+}
+
+.con .shlogo {
+    position: relative;
+    width: 480px;
+    height: 120px;
+    margin: 20px auto;
+    background: url(/static/search/mrdoc_search_logo.svg) no-repeat center/cover;
+}
+
+.con .shlogo a {
+    width: 100%;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.con .sou {
+    max-width: 680px;
+    position: relative;
+    width: calc(100% - 60px);
+    min-width: 320px;
+    margin: 0 auto;
+}
+
+.con .sou form {
+    width: 100%;
+    /*border: 1px solid #ddd;*/
+    height: 50px;
+    display: block;
+    margin: 10px auto 30px;
+    position: relative;
+}
+
+.con .sou form .wd {
+    width: 100%;
+    height: 100%;
+    display: block;
+    border: 1px solid #ddd;
+    border-radius: 25px;
+    line-height: 100%;
+    text-indent: 20px;
+    font-size: 18px;
+}
+
+.con .sou form .wd:focus {
+    background: #fff;
+    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
+    border-color: #fff
+}
+
+.con .sou form button {
+    width: 40px;
+    height: 40px;
+    display: block;
+    position: absolute;
+    z-index: 10;
+    right: 6px;
+    top: 6px;
+    cursor: pointer;
+    font-size: 22px;
+    line-height: 40px;
+    border-radius: 50%;
+    color: #777;
+}
+
+.con .sou ul {
+    height: 40px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+}
+
+.con .sou ul li {
+    width: 120px;
+    margin: 0 10px;
+    float: left;
+    -webkit-tap-highlight-color: transparent;
+    background: #eee;
+    font-size: 16px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    text-indent: 30px;
+    cursor: pointer;
+    position: relative;
+    border-radius: 20px;
+}
+
+.con .sou ul li:active {
+    background: #fff;
+    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, .1);
+}
+
+.con .sou ul li i {
+    position: absolute;
+    display: block;
+    width: 40px;
+    height: 40px;
+    left: 0;
+    /* border-radius: 50%; */
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    /* background-color: #fff; */
+    transform: scale(0.7);
+}
+
+.foot {
+    position: absolute;
+    bottom: 10px;
+    z-index: 1000;
+    text-align: center;
+    width: 100%;
+    color: #999;
+    height: 20px;
+    line-height: 20px;
+    font-size: 12px;
+}
+
+.home {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    right: 70px;
+    top: 10px;
+    z-index: 200;
+    cursor: pointer;
+}
+
+.home a {
+    font-size: 20px;
+    color: #999;
+    line-height: 50px;
+    display: block;
+    text-align: center;
+}
+
+svg.icon {
+    width: 14px;
+    height: 14px;
+    margin: 0 5px 0 8px;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+}
+
+@media (max-width: 640px) {
+    .con {
+        top: 0px;
+    }
+
+    .con .shlogo {
+        width: 320px;
+        height: 100px;
+    }
+
+    .con .sou form .wd:focus {
+        background: #f1f1f1;
+        box-shadow: none;
+        border-color: #ccc
+    }
+
+    .con .sou form button {
+        border-radius: 25px;
+    }
+
+    .con .sou ul li {
+        width: 100px;
+        font-size: 12px;
+        text-indent: 30px;
+    }
+}
+
+@media (max-height: 420px) {
+    .con {
+        margin: 0;
+        top: 0px;
+    }
+
+    .con .sou form .wd {
+        text-indent: 50px;
+    }
+
+    .con .sou form:after {
+        content: "";
+        display: block;
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        background: url(/static/search/search.svg) no-repeat center/cover;
+        border-radius: 50%;
+        overflow: hidden;
+    }
+
+    .con .shlogo {
+        display: none;
+    }
+
+    .foot {
+        display: none;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #162035;
+    }
+
+    .con .sou ul li {
+        background: #293550;
+        color: #fff;
+    }
+
+    .con .sou form .wd:focus {
+        background: #293550;
+        border: 1px solid #162035;
+    }
+
+    .con .sou form .wd {
+        border: 1px solid #293550;
+        color: #bbb;
+    }
+}
+
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #222d46;
+    border-radius: 0px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #293550;
+    border-radius: 0px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #293550;
+}
+
+::-webkit-scrollbar-corner {
+    background: #222d46;
+}
\ No newline at end of file