mirror of
https://github.com/nonebot/nonebot2.git
synced 2025-07-27 16:21:28 +00:00
📝 add creating project
This commit is contained in:
231
docs/.vuepress/components/Messenger.vue
Normal file
231
docs/.vuepress/components/Messenger.vue
Normal file
@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="qq-chat">
|
||||
<v-app
|
||||
><v-main>
|
||||
<v-card class="elevation-6">
|
||||
<v-toolbar color="primary" dark dense flat>
|
||||
<v-row no-gutters>
|
||||
<v-col>
|
||||
<v-row no-gutters justify="space-between">
|
||||
<v-col cols="auto">
|
||||
<v-icon small>fa-chevron-left</v-icon>
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
<h3>🔥</h3>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
<h3 class="white--text">NoneBot</h3>
|
||||
</v-col>
|
||||
<v-col class="text-right">
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn class="mr-2" icon small v-bind="attrs" v-on="on"
|
||||
><v-icon small>fa-terminal</v-icon></v-btn
|
||||
>
|
||||
</template>
|
||||
<span>Terminal</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn icon small v-bind="attrs" v-on="on"
|
||||
><v-icon small>fa-trash-alt</v-icon></v-btn
|
||||
>
|
||||
</template>
|
||||
<span>Clear</span>
|
||||
</v-tooltip>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-toolbar>
|
||||
<v-container fluid ref="chat" class="chat chat-bg">
|
||||
<template v-for="(item, index) in messages">
|
||||
<v-row
|
||||
v-if="item.position === 'right'"
|
||||
justify="end"
|
||||
:key="index"
|
||||
class="message wow animate__fadeInRight"
|
||||
data-wow-duration="0.7s"
|
||||
>
|
||||
<div
|
||||
class="message-box"
|
||||
v-html="
|
||||
item.msg.replace(/\n/g, '<br/>').replace(/ /g, ' ')
|
||||
"
|
||||
></div>
|
||||
<v-avatar color="blue lighten-2" size="36">
|
||||
<v-icon small>fa-user</v-icon>
|
||||
</v-avatar>
|
||||
</v-row>
|
||||
<v-row
|
||||
v-else-if="item.position === 'left'"
|
||||
justify="start"
|
||||
:key="index"
|
||||
class="message wow animate__fadeInLeft"
|
||||
data-wow-duration="0.7s"
|
||||
>
|
||||
<v-avatar color="transparent" size="36">
|
||||
<v-img src="/logo.png"></v-img>
|
||||
</v-avatar>
|
||||
<div
|
||||
class="message-box"
|
||||
v-html="
|
||||
item.msg.replace(/\n/g, '<br/>').replace(/ /g, ' ')
|
||||
"
|
||||
></div>
|
||||
</v-row>
|
||||
<v-row
|
||||
v-else
|
||||
justify="center"
|
||||
:key="index"
|
||||
class="notify mt-1 wow animate__fadeIn"
|
||||
data-wow-duration="0.7s"
|
||||
>
|
||||
<div class="notify-box">
|
||||
<span style="display: inline; white-space: nowrap">
|
||||
<v-icon x-small color="blue" left>fa-info-circle</v-icon>
|
||||
</span>
|
||||
<span
|
||||
v-html="
|
||||
item.msg.replace(/\n/g, '<br/>').replace(/ /g, ' ')
|
||||
"
|
||||
></span>
|
||||
</div>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-container>
|
||||
<v-container fluid class="chat-bg py-0">
|
||||
<v-row dense class="mx-0">
|
||||
<v-col>
|
||||
<v-text-field
|
||||
dense
|
||||
solo
|
||||
hide-details
|
||||
height="28px"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
<v-btn
|
||||
style="font-size: 0.8rem"
|
||||
color="primary"
|
||||
small
|
||||
rounded
|
||||
depressed
|
||||
>发送</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="text-center" no-gutters>
|
||||
<v-col class="pa-1" cols="2">
|
||||
<v-icon small>fa-microphone</v-icon>
|
||||
</v-col>
|
||||
<v-col class="pa-1" cols="2">
|
||||
<v-icon small>fa-image</v-icon>
|
||||
</v-col>
|
||||
<v-col class="pa-1" cols="2">
|
||||
<v-icon small>fa-camera</v-icon>
|
||||
</v-col>
|
||||
<v-col class="pa-1" cols="2">
|
||||
<v-icon small>fa-wallet</v-icon>
|
||||
</v-col>
|
||||
<v-col class="pa-1" cols="2">
|
||||
<v-icon small>fa-smile-wink</v-icon>
|
||||
</v-col>
|
||||
<v-col class="pa-1" cols="2">
|
||||
<v-icon small>fa-plus-circle</v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card></v-main
|
||||
></v-app
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { WOW } from "wowjs";
|
||||
import "animate.css/animate.min.css";
|
||||
|
||||
export default {
|
||||
name: "Messenger",
|
||||
props: {
|
||||
messages: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
wow: null
|
||||
}),
|
||||
methods: {
|
||||
initWOW: function() {
|
||||
this.wow = new WOW({
|
||||
noxClass: "wow",
|
||||
animateClass: "animate__animated",
|
||||
offset: 0,
|
||||
mobile: true,
|
||||
live: true
|
||||
});
|
||||
this.wow.init();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initWOW();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wow {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.chat {
|
||||
min-height: 150px;
|
||||
}
|
||||
.chat-bg {
|
||||
background-color: #f3f6f9;
|
||||
}
|
||||
|
||||
.message {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
.message .message-box {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
max-width: 55%;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
margin: 0.4rem 0.8rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
.message .message-box::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 0;
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
color: #fff;
|
||||
border: 0 solid transparent;
|
||||
border-bottom: 7px solid;
|
||||
border-radius: 0 0 0 8px;
|
||||
}
|
||||
.message.justify-end .message-box::after {
|
||||
left: 100%;
|
||||
right: auto;
|
||||
border-radius: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.notify {
|
||||
position: relative;
|
||||
}
|
||||
.notify .notify-box {
|
||||
max-width: 70%;
|
||||
background: #e0e0e0;
|
||||
border-radius: 10px;
|
||||
padding: 5px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
@ -20,6 +20,14 @@ module.exports = context => ({
|
||||
[
|
||||
"meta",
|
||||
{ name: "apple-mobile-web-app-status-bar-style", content: "black" }
|
||||
],
|
||||
[
|
||||
"link",
|
||||
{
|
||||
rel: "stylesheet",
|
||||
href:
|
||||
"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"
|
||||
}
|
||||
]
|
||||
],
|
||||
locales: {
|
||||
@ -59,7 +67,12 @@ module.exports = context => ({
|
||||
path: "",
|
||||
collapsable: false,
|
||||
sidebar: "auto",
|
||||
children: ["", "installation", "getting-started"]
|
||||
children: [
|
||||
"",
|
||||
"installation",
|
||||
"getting-started",
|
||||
"creating-a-project"
|
||||
]
|
||||
}
|
||||
],
|
||||
"/api/": [
|
||||
@ -124,6 +137,14 @@ module.exports = context => ({
|
||||
console.log(`Created version ${version} in ${versionDestPath}`);
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
"container",
|
||||
{
|
||||
type: "vue",
|
||||
before: '<pre class="vue-container"><code>',
|
||||
after: "</code></pre>"
|
||||
}
|
||||
]
|
||||
]
|
||||
});
|
||||
|
@ -4,12 +4,25 @@
|
||||
* https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
|
||||
*/
|
||||
|
||||
import Vuetify from "vuetify";
|
||||
import "vuetify/dist/vuetify.min.css";
|
||||
|
||||
export default ({
|
||||
Vue, // the version of Vue being used in the VuePress app
|
||||
options, // the options for the root Vue instance
|
||||
router, // the router instance for the app
|
||||
siteData // site metadata
|
||||
}) => {
|
||||
Vue.use(Vuetify);
|
||||
options.vuetify = new Vuetify({
|
||||
icons: {
|
||||
iconfont: "fa",
|
||||
values: {
|
||||
//
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (typeof process === "undefined" || process.env.VUE_ENV !== "server") {
|
||||
router.onReady(() => {
|
||||
const { app } = router;
|
||||
@ -18,7 +31,7 @@ export default ({
|
||||
setTimeout(() => {
|
||||
const { hash } = document.location;
|
||||
if (hash.length > 1) {
|
||||
const id = hash.substring(1);
|
||||
const id = decodeURI(hash.substring(1));
|
||||
const element = document.getElementById(id);
|
||||
if (element) element.scrollIntoView();
|
||||
}
|
||||
|
Reference in New Issue
Block a user