📝 add creating project

This commit is contained in:
yanyongyu 2020-09-17 13:12:48 +08:00
parent 44722a11d3
commit e124b08e49
8 changed files with 826 additions and 226 deletions

View 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, '&nbsp;')
"
></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, '&nbsp;')
"
></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, '&nbsp;')
"
></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>

View File

@ -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>"
}
]
]
});

View File

@ -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();
}

View File

@ -0,0 +1,55 @@
# 创建一个完整的项目
上一章中我们已经运行了一个最小的 NoneBot 实例,在这一章,我们将从零开始一个完整的项目。
## 目录结构
首先,我们可以使用 `nb-cli` 或者自行创建项目目录:
```bash
pip install nonebot2[cli]
# pip install nb-cli
nb create
```
这将创建默认的目录结构
<!-- prettier-ignore-start -->
:::vue
AweSome-Bot
├── `awesome_bot` _(**或是 src**)_
│ └── `plugins`
├── `.env`
├── `.env.dev`
├── `.env.prod`
├── .gitignore
├── `bot.py`
├── docker-compose.yml
├── Dockerfile
├── `pyproject.toml`
└── README.md
:::
<!-- prettier-ignore-end -->
- `awesome_bot/plugins``src/plugins`: 用于存放编写的 bot 插件
- `.env`, `.env.dev`, `.env.prod`: 各环境配置文件
- `bot.py`: bot 入口文件
- `pyproject.toml`: 项目依赖管理文件,默认使用 [poetry](https://python-poetry.org/)
## 启动 Bot
如果你使用 `nb-cli`
```bash
nb run [--file=bot.py] [--app=app]
```
或者使用
```bash
python bot.py
```
:::tip 提示
如果在 bot 入口文件内定义了 asgi server `nb-cli` 将会为你启动**冷重载模式**
:::

View File

@ -140,3 +140,5 @@ QQ 协议端举例:
```
到这里如果一切 OK你应该会收到机器人给你回复了 `你好,世界`。这一历史性的对话标志着你已经成功地运行了一个 NoneBot 的最小实例,开始了编写更强大的 QQ 机器人的创意之旅!
<Messenger :messages="[{ position: 'right', msg: '/say 你好,世界' }, { position: 'left', msg: '你好,世界' }]"/>

View File

@ -15,7 +15,8 @@ pip install nonebot2
```bash
git clone https://github.com/nonebot/nonebot2.git
cd nonebot2
pip install .
poetry install --no-dev # 推荐
pip install . # 不推荐
```
## 额外依赖

713
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -20,10 +20,14 @@
},
"license": "MIT",
"devDependencies": {
"@vuepress/plugin-back-to-top": "^1.3.1",
"@vuepress/plugin-medium-zoom": "^1.3.1",
"vuepress": "^1.3.1",
"@vuepress/plugin-back-to-top": "^1.5.4",
"@vuepress/plugin-medium-zoom": "^1.5.4",
"vuepress": "^1.5.4",
"vuepress-plugin-versioning": "^4.5.0",
"vuepress-theme-titanium": "^4.5.1"
},
"dependencies": {
"vuetify": "^2.3.10",
"wowjs": "^1.1.3"
}
}