mirror of
https://github.com/nonebot/nonebot2.git
synced 2025-11-04 08:56:42 +00:00
📝 add creating project
This commit is contained in:
yanyongyu
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();
|
||||
}
|
||||
|
||||
55
docs/guide/creating-a-project.md
Normal file
55
docs/guide/creating-a-project.md
Normal 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` 将会为你启动**冷重载模式**
|
||||
:::
|
||||
@@ -140,3 +140,5 @@ QQ 协议端举例:
|
||||
```
|
||||
|
||||
到这里如果一切 OK，你应该会收到机器人给你回复了 `你好，世界`。这一历史性的对话标志着你已经成功地运行了一个 NoneBot 的最小实例，开始了编写更强大的 QQ 机器人的创意之旅！
|
||||
|
||||
<Messenger :messages="[{ position: 'right', msg: '/say 你好，世界' }, { position: 'left', msg: '你好，世界' }]"/>
|
||||
|
||||
@@ -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 . # 不推荐
|
||||
```
|
||||
|
||||
## 额外依赖
|
||||
|
||||
Reference in New Issue
Block a user