add:新增背景图片设置，新增文本markdown解析
This commit is contained in:
lan
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,206 @@
|
||||
html.dark {
|
||||
pre code.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
padding: 3px 5px
|
||||
}
|
||||
|
||||
.hljs {
|
||||
color: #abb2bf;
|
||||
background: #282c34
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-operator,
|
||||
.hljs-pattern-match {
|
||||
color: #f92672
|
||||
}
|
||||
|
||||
.hljs-function,
|
||||
.hljs-pattern-match .hljs-constructor {
|
||||
color: #61aeee
|
||||
}
|
||||
|
||||
.hljs-function .hljs-params {
|
||||
color: #a6e22e
|
||||
}
|
||||
|
||||
.hljs-function .hljs-params .hljs-typing {
|
||||
color: #fd971f
|
||||
}
|
||||
|
||||
.hljs-module-access .hljs-module {
|
||||
color: #7e57c2
|
||||
}
|
||||
|
||||
.hljs-constructor {
|
||||
color: #e2b93d
|
||||
}
|
||||
|
||||
.hljs-constructor .hljs-string {
|
||||
color: #9ccc65
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #b18eb1;
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-formula {
|
||||
color: #c678dd
|
||||
}
|
||||
|
||||
.hljs-deletion,
|
||||
.hljs-name,
|
||||
.hljs-section,
|
||||
.hljs-selector-tag,
|
||||
.hljs-subst {
|
||||
color: #e06c75
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: #56b6c2
|
||||
}
|
||||
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-meta .hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-string {
|
||||
color: #98c379
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-title.class_ {
|
||||
color: #e6c07b
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-number,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable {
|
||||
color: #d19a66
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-link,
|
||||
.hljs-meta,
|
||||
.hljs-selector-id,
|
||||
.hljs-symbol,
|
||||
.hljs-title {
|
||||
color: #61aeee
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
pre code.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
padding: 3px 5px;
|
||||
&::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.hljs {
|
||||
color: #383a42;
|
||||
background: #fafafa
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #a0a1a7;
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-formula,
|
||||
.hljs-keyword {
|
||||
color: #a626a4
|
||||
}
|
||||
|
||||
.hljs-deletion,
|
||||
.hljs-name,
|
||||
.hljs-section,
|
||||
.hljs-selector-tag,
|
||||
.hljs-subst {
|
||||
color: #e45649
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: #0184bb
|
||||
}
|
||||
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-meta .hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-string {
|
||||
color: #50a14f
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-number,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable {
|
||||
color: #986801
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-link,
|
||||
.hljs-meta,
|
||||
.hljs-selector-id,
|
||||
.hljs-symbol,
|
||||
.hljs-title {
|
||||
color: #4078f2
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-title.class_ {
|
||||
color: #c18401
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
@import 'katex/dist/katex.min.css';
|
||||
@import '@/assets/code/highlight.scss';
|
||||
@import '@/assets/code/github-markdown.scss';
|
||||
@import '@/assets/code/markdown-add.scss';
|
||||
.markdown-body {
|
||||
box-sizing: border-box;
|
||||
background:none ;
|
||||
*{
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.markdown-body {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
max-width: 1080px;
|
||||
padding: 0 5px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
border-radius: 10px 10px 0 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.chat-message-bubble {
|
||||
padding: 8px;
|
||||
align-self: flex-start;
|
||||
color: #2f4f4f;
|
||||
border-radius: 8px 8px 8px 0;
|
||||
background: linear-gradient(to right, #c9d6ff, #e2e2e2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
box-shadow: 0 16px 20px 0 rgba(174, 167, 223, .06);
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.chat-toolbar-icon{
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chat-message-meta {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.n-input-wrapper {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.chat-message-nickname-and-time {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.is-me {
|
||||
justify-content: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.n-input .n-input__suffix, .n-input .n-input__prefix {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.n-input .n-input-wrapper {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.n-input .n-input__suffix .n-button {
|
||||
border-radius: 8px !important;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
position: absolute; right: 10px; bottom: 10px;
|
||||
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
|
||||
background-image: linear-gradient(-56deg, #0773ff 5%, #797eff);
|
||||
--n-border: none !important;
|
||||
}
|
||||
|
||||
.chat-message.is-me .chat-message-bubble {
|
||||
background: linear-gradient(to right, #56ccf2, #2f80ed); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
border-radius: 8px 8px 0 !important;
|
||||
box-shadow: 0 16px 20px 0 rgba(174, 167, 223, .06);
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
.markdown-body {
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
|
||||
p {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre tt {
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
// .highlight pre,
|
||||
// pre {
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
code.hljs {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
&-wrapper {
|
||||
position: relative;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
&-header {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
color: #b3b3b3;
|
||||
|
||||
&__copy {
|
||||
cursor: pointer;
|
||||
margin-left: 0.5rem;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
color: #65a665;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html.dark {
|
||||
|
||||
.message-reply {
|
||||
.whitespace-pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
color: var(--n-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight pre,
|
||||
pre {
|
||||
background-color: #282c34;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { useFileDataStore } from "@/stores/fileData";
|
||||
import { useFileBoxStore } from "@/stores/fileBox";
|
||||
|
||||
import hljs from 'highlight.js';
|
||||
import mila from 'markdown-it-link-attributes';
|
||||
import markdownIt from 'markdown-it';
|
||||
import markdownItKatex from '@traptitech/markdown-it-katex';
|
||||
import '@/assets/code/main.scss'
|
||||
const fileStore = useFileDataStore();
|
||||
const fileBoxStore = useFileBoxStore();
|
||||
import QrcodeVue from "qrcode.vue";
|
||||
@@ -33,10 +37,25 @@ const copyText = (text: any, style = 0) => {
|
||||
const nowText = ref('');
|
||||
const showTextDetail = (text: any) => {
|
||||
showTextDetailVisible.value = true;
|
||||
nowText.value = text;
|
||||
nowText.value = renderMarkdown(text);
|
||||
};
|
||||
const showTextDetailVisible = ref(false);
|
||||
|
||||
const md = new markdownIt({
|
||||
html: false,
|
||||
linkify: true,
|
||||
highlight(code: any, language: any) {
|
||||
const validLang = Boolean(language && hljs.getLanguage(language));
|
||||
return `<pre class="code-block-wrapper"><code class="hljs code-block-body ${validLang}">${hljs.highlight(code, { language: language ?? '' }).value}</code></pre>`;
|
||||
}
|
||||
});
|
||||
|
||||
md.use(mila, { attrs: { target: '_blank', rel: 'noopener' } });
|
||||
md.use(markdownItKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' });
|
||||
function renderMarkdown(message: string) {
|
||||
return md.render(message);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -9,6 +9,9 @@
|
||||
<el-form-item size="large" label="关键词" style="letter-spacing: 0.3rem">
|
||||
<el-input v-model="config.keywords" />
|
||||
</el-form-item>
|
||||
<el-form-item size="large" label="背景图片">
|
||||
<el-input v-model="config.background" />
|
||||
</el-form-item>
|
||||
<el-form-item size="large" label="后台密码">
|
||||
<el-input type="password" v-model="config.admin_token" />
|
||||
</el-form-item>
|
||||
@@ -89,6 +92,7 @@ const config = ref({
|
||||
uploadSize: 1,
|
||||
uploadMinute: 1,
|
||||
s3_access_key_id: '',
|
||||
background: '',
|
||||
s3_secret_access_key: '',
|
||||
s3_bucket_name: '',
|
||||
s3_endpoint_url: '',
|
||||
|
||||
Reference in New Issue
Block a user