MangoFanFanw/NyaHome
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

style(webui): Oxc format 已有代码

Browse Source
This commit is contained in:
芒果帆帆
2026-05-24 16:50:44 +08:00
parent ab396b01f2
commit 3117af670b
31 changed files with 559 additions and 468 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/App.vue
+4 -4
View File
@@ -3,12 +3,12 @@ import PageHeader from '@/components/PageHeader.vue'
import { dateZhCN, zhCN } from 'naive-ui'
import { useNowUser } from '@/stores/now-user.ts'
import { onMounted } from 'vue'
import {useHead} from "@unhead/vue";
import { useHead } from '@unhead/vue'
const NOWUSER = useNowUser()
useHead({
titleTemplate: "%s | NayHome"
titleTemplate: '%s | NayHome',
})
onMounted(async () => {
@@ -18,9 +18,9 @@ onMounted(async () => {
try {
await NOWUSER.loadUserInfo(Number(user_id), access_token)
} catch {
localStorage.removeItem("user-id")
localStorage.removeItem('user-id')
localStorage.removeItem('access-token')
console.log("已移除 localstorage 中存储的验证信息。")
console.log('已移除 localstorage 中存储的验证信息。')
}
}
})
webui/src/components/InDev.vue
+2 -6
View File
@@ -1,13 +1,9 @@
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<template>
<div class="in-dev">
<n-text class="in-dev-title">功能开发中</n-text>
<n-text class="in-dev-content">
已经被画在饼上辽，请耐心等待喵！
</n-text>
<n-text class="in-dev-content"> 已经被画在饼上辽，请耐心等待喵！ </n-text>
</div>
</template>
webui/src/components/admin/ChangeEmailModal.vue
+15 -8
View File
@@ -4,7 +4,7 @@ import {api} from '@/tools/web.ts'
import type { ReturnDto } from '@/types/response.ts'
import { useMessage } from 'naive-ui'
import VerifyCodeModal from '@/components/admin/VerifyCodeModal.vue'
import {useNowUser} from "@/stores/now-user.ts";
import { useNowUser } from '@/stores/now-user.ts'
const MESSAGE = useMessage()
const NOWUSER = useNowUser()
@@ -12,8 +12,8 @@ const NOWUSER = useNowUser()
const showModal = defineModel('showModal', { required: true })
const showVerifyCodeModal = ref(false)
const newEmail = ref("")
const verifyCode = ref("")
const newEmail = ref('')
const verifyCode = ref('')
function sendEmail() {
api
@@ -33,10 +33,14 @@ function sendEmail() {
}
function verifyEmail() {
api.post('/admin/me/email-verify/', JSON.stringify({
api
.post(
'/admin/me/email-verify/',
JSON.stringify({
to: newEmail.value,
verify_code: String(verifyCode.value).split(",").join(""),
}))
verify_code: String(verifyCode.value).split(',').join(''),
}),
)
.then((res) => res.data as ReturnDto)
.then((res) => {
if (res.success) {
@@ -69,8 +73,11 @@ function verifyEmail() {
</n-form>
</n-modal>
<verify-code-modal v-model:show-modal="showVerifyCodeModal" v-model:verify-code="verifyCode"
:verify="verifyEmail"/>
<verify-code-modal
v-model:show-modal="showVerifyCodeModal"
v-model:verify-code="verifyCode"
:verify="verifyEmail"
/>
</template>
<style scoped></style>
webui/src/components/admin/ConfigCard.vue
+2 -4
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
defineProps<{
title: string;
title: string
}>()
</script>
@@ -16,6 +16,4 @@ defineProps<{
</n-card>
</template>
<style scoped>
</style>
<style scoped></style>
webui/src/components/admin/UserAction.vue
+2 -2
View File
@@ -55,8 +55,8 @@ function login() {
<template>
<div>
<div class="user-action nyahome-card" v-if="NOWUSER.isLogin" style="position: relative">
<img :src="NOWUSER.background_url" alt="User Background" class="user-action-background">
<div class="card-content" style="margin-top: auto; margin-bottom: 20px;">
<img :src="NOWUSER.background_url" alt="User Background" class="user-action-background" />
<div class="card-content" style="margin-top: auto; margin-bottom: 20px">
<n-avatar :size="96" circle :src="NOWUSER.avatar_url" />
<n-h2 style="margin: 0">
{{ NOWUSER.display_name ? NOWUSER.display_name : NOWUSER.name }}
webui/src/components/admin/UserPasswordModal.vue
+19 -18
View File
@@ -1,15 +1,15 @@
<script setup lang="ts">
import {ref} from "vue";
import {api} from "@/tools/web.ts";
import {useNowUser} from "@/stores/now-user.ts";
import {useMessage} from "naive-ui";
import {useRouter} from "vue-router";
import { ref } from 'vue'
import { api } from '@/tools/web.ts'
import { useNowUser } from '@/stores/now-user.ts'
import { useMessage } from 'naive-ui'
import { useRouter } from 'vue-router'
const ROUTER = useRouter();
const ROUTER = useRouter()
const MESSAGE = useMessage()
const NOWUSER = useNowUser()
const showModal = defineModel("showModal", {required: true})
const showModal = defineModel('showModal', { required: true })
const changeForm = ref({
old_password: '',
@@ -17,23 +17,24 @@ const changeForm = ref({
})
function change() {
api.post("/admin/me/password/", JSON.stringify(changeForm.value))
api
.post('/admin/me/password/', JSON.stringify(changeForm.value))
.then(() => {
MESSAGE.success("密码修改成功，请重新登录。")
MESSAGE.success('密码修改成功，请重新登录。')
NOWUSER.isLogin = false
localStorage.removeItem("user-id")
localStorage.removeItem("access-token")
ROUTER.push("/")
localStorage.removeItem('user-id')
localStorage.removeItem('access-token')
ROUTER.push('/')
})
.catch((err) => {
MESSAGE.error(`密码修改失败：${err}`)
MESSAGE.warning("如果您忘记了原密码，请选择「忘记密码」。")
MESSAGE.warning('如果您忘记了原密码，请选择「忘记密码」。')
})
}
</script>
<template>
<n-modal style="width: 600px;" v-model:show="showModal" title="修改密码" preset="card">
<n-modal style="width: 600px" v-model:show="showModal" title="修改密码" preset="card">
<n-form label-align="right" label-placement="left" label-width="auto" :model="changeForm">
<n-form-item label="原密码" path="old_password">
<n-input v-model:value="changeForm.old_password" />
@@ -44,13 +45,13 @@ function change() {
<n-form-item label="确认修改">
<n-flex>
<n-button type="error" @click="change()">确认修改</n-button>
<n-tag type="warning" size="large">修改密码会注销所有已登录状态，您将需要重新登录。</n-tag>
<n-tag type="warning" size="large"
>修改密码会注销所有已登录状态，您将需要重新登录。</n-tag
>
</n-flex>
</n-form-item>
</n-form>
</n-modal>
</template>
<style scoped>
</style>
<style scoped></style>
webui/src/components/chatroom/AiiModelAddModal.vue
+4 -8
View File
@@ -124,12 +124,10 @@ function onConfirm() {
<n-tag round type="info">修改已添加的提供商？请前往管理中心</n-tag>
<n-button secondary type="success" size="small" round @click="loadProviders()"
>刷新
</n-button
>
</n-button>
<n-button secondary type="warning" size="small" round @click="showAddProviderModal = true"
>添加
</n-button
>
</n-button>
</n-flex>
</n-form-item>
<n-form-item label="模型名称" path="model_name">
@@ -145,13 +143,11 @@ function onConfirm() {
v-bind:key="m"
@click="addModelForm.model_name = m"
>{{ m }}
</n-button
>
</n-button>
</n-flex>
<n-button secondary type="success" size="small" round @click="onGetRemoteModels()"
>获取模型列表
</n-button
>
</n-button>
</n-flex>
</n-form-item>
<n-form-item label="最大上下文" path="max_context_length">
webui/src/components/chatroom/ChatroomCard.vue
+17 -4
View File
@@ -10,11 +10,24 @@ defineProps<{
<template>
<div class="chatroom-card">
<n-image v-if="infoMode" class="image" object-fit="cover" preview-disabled :src="feature_image"
<n-image
v-if="infoMode"
class="image"
object-fit="cover"
preview-disabled
:src="feature_image"
width="140"
height="100"/>
<n-image v-else class="image" object-fit="cover" preview-disabled :src="feature_image"
width="84" height="60"/>
height="100"
/>
<n-image
v-else
class="image"
object-fit="cover"
preview-disabled
:src="feature_image"
width="84"
height="60"
/>
<div class="card-body">
<n-text class="name">{{ name }}</n-text>
<n-ellipsis :line-clamp="2" style="max-width: 100%" class="description">
webui/src/components/chatroom/ChatroomCreatorModal.vue
+25 -13
View File
@@ -4,9 +4,9 @@ import type {ChatroomPublic} from '@/types/chatroom.js'
import { api } from '@/tools/web.js'
import type { ReturnDto } from '@/types/response.js'
import { useMessage } from 'naive-ui'
import UploadFileModal from "@/components/file/UploadFileModal.vue";
import SelectFileModal from "@/components/file/SelectFileModal.vue";
import type {UploadFileDto} from "@/types/user.js";
import UploadFileModal from '@/components/file/UploadFileModal.vue'
import SelectFileModal from '@/components/file/SelectFileModal.vue'
import type { UploadFileDto } from '@/types/user.js'
const MESSAGE = useMessage()
@@ -34,7 +34,7 @@ watch(image_url, () => {
})
async function loadFiles() {
return await api.get("/file/").then(res => files.value = res.data as UploadFileDto[])
return await api.get('/file/').then((res) => (files.value = res.data as UploadFileDto[]))
}
function onSubmit() {
@@ -56,8 +56,13 @@ function onSubmit() {
</script>
<template>
<n-modal v-model:show="showModal" preset="card" title="创建聊天室" content-scrollable
style="width: 800px;">
<n-modal
v-model:show="showModal"
preset="card"
title="创建聊天室"
content-scrollable
style="width: 800px"
>
<n-form
:model="createChatroomForm"
label-placement="left"
@@ -71,11 +76,13 @@ function onSubmit() {
<n-input type="textarea" v-model:value="createChatroomForm.description" />
</n-form-item>
<n-form-item path="feature_image" label="特色图像">
<n-flex style="width: 100%;" :wrap="false">
<n-input v-model:value="createChatroomForm.feature_image"
placeholder="留空以使用默认图像"/>
<n-button secondary type="info" @click="showSelectModal = true;">选择</n-button>
<n-button secondary type="warning" @click="showUploadModal = true;">上传</n-button>
<n-flex style="width: 100%" :wrap="false">
<n-input
v-model:value="createChatroomForm.feature_image"
placeholder="留空以使用默认图像"
/>
<n-button secondary type="info" @click="showSelectModal = true">选择</n-button>
<n-button secondary type="warning" @click="showUploadModal = true">上传</n-button>
</n-flex>
</n-form-item>
<n-form-item label="确认？">
@@ -83,8 +90,13 @@ function onSubmit() {
</n-form-item>
</n-form>
<select-file-modal :max="1" :extensions="['png', 'jpeg', 'jpg']" :load-files="loadFiles"
v-model:show-modal="showSelectModal" v-model:select-files="selectFiles"/>
<select-file-modal
:max="1"
:extensions="['png', 'jpeg', 'jpg']"
:load-files="loadFiles"
v-model:show-modal="showSelectModal"
v-model:select-files="selectFiles"
/>
<upload-file-modal v-model:show-modal="showUploadModal" :after-leave="loadFiles" />
</n-modal>
</template>
webui/src/components/chatroom/ScriptDrawer.vue
+1 -2
View File
@@ -48,8 +48,7 @@ watch(
() => {
try {
scriptForm.value = JSON.parse(script) as ChatScript
} catch {
}
} catch {}
},
{ immediate: true },
)
webui/src/components/file/FileModal.vue
+7 -6
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import type {UploadFileDto} from "@/types/user.js";
import {useNowUser} from "@/stores/now-user.js";
import {computed} from "vue";
import type { UploadFileDto } from '@/types/user.js'
import { useNowUser } from '@/stores/now-user.js'
import { computed } from 'vue'
const NOWUSER = useNowUser()
@@ -11,17 +11,18 @@ const {file} = defineProps<{
const is_you = computed(() => NOWUSER.id === file.uploader_id)
const showModal = defineModel("showModal", {required: true})
const showModal = defineModel('showModal', { required: true })
</script>
<template>
<n-modal v-model:show="showModal" preset="card" style="width: 1000px;" title="文件信息">
<n-modal v-model:show="showModal" preset="card" style="width: 1000px" title="文件信息">
<div class="card-content">
<n-image :width="500" :height="500" object-fit="contain" :src="file.download_url" />
<div class="side">
<n-h3>{{ file.original_name }}</n-h3>
<n-p>保存文件名：{{ file.safe_name }}</n-p>
<n-p>上传用户ID：{{ file.uploader_id }}
<n-p
>上传用户ID：{{ file.uploader_id }}
<n-tag v-if="is_you" type="primary">你</n-tag>
</n-p>
webui/src/components/file/FileThumbnail.vue
+10 -8
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import type {UploadFileDto} from "@/types/user.js";
import {computed, onMounted, ref, useTemplateRef} from "vue";
import FileModal from "@/components/file/FileModal.vue";
import type { UploadFileDto } from '@/types/user.js'
import { computed, onMounted, ref, useTemplateRef } from 'vue'
import FileModal from '@/components/file/FileModal.vue'
const { file, size, enableSelect, onSelect, onRemove } = defineProps<{
file: UploadFileDto
@@ -11,12 +11,12 @@ const {file, size, enableSelect, onSelect, onRemove} = defineProps<{
onRemove?: (file: UploadFileDto) => boolean
}>()
const th = useTemplateRef("th")
const th = useTemplateRef('th')
const showModal = ref(false)
const selected = ref(false)
const ALLOWED_EXTENSIONS = ["jpg", "jpeg", "png"]
const ALLOWED_EXTENSIONS = ['jpg', 'jpeg', 'png']
onMounted(() => {
if (ALLOWED_EXTENSIONS.includes(file.safe_name.split('.').at(-1)!.toLowerCase())) {
@@ -32,13 +32,13 @@ function onClick() {
if (selected.value && onRemove) {
if (onRemove(file)) {
selected.value = false
th.value?.classList.remove("selected")
th.value?.classList.remove('selected')
console.log(`选中文件：${file.original_name}`)
}
} else if (!selected.value && onSelect) {
if (onSelect(file)) {
selected.value = true
th.value?.classList.add("selected")
th.value?.classList.add('selected')
console.log(`取消文件：${file.original_name}`)
}
}
@@ -64,7 +64,9 @@ div.file-thumbnail {
background-repeat: no-repeat;
background-size: cover;
transition: border-color 0.3s, box-shadow 0.3s;
transition:
border-color 0.3s,
box-shadow 0.3s;
}
div.selected {
webui/src/components/file/SelectFileModal.vue
+25 -14
View File
@@ -1,8 +1,8 @@
<script setup lang="ts">
import {selectFilesCom} from "@/components/file/upload-files.js";
import {computed, ref, watch} from "vue";
import type {UploadFileDto} from "@/types/user.js";
import {useMessage} from "naive-ui";
import { selectFilesCom } from '@/components/file/upload-files.js'
import { computed, ref, watch } from 'vue'
import type { UploadFileDto } from '@/types/user.js'
import { useMessage } from 'naive-ui'
const MESSAGE = useMessage()
@@ -12,18 +12,18 @@ const {max, extensions, loadFiles} = defineProps<{
loadFiles: () => Promise<UploadFileDto[]>
}>()
const showModal = defineModel("showModal", {required: true})
const showModal = defineModel('showModal', { required: true })
const files = ref<UploadFileDto[]>([])
const tempFiles = ref<UploadFileDto[]>([])
const selectFiles = defineModel<UploadFileDto[]>("selectFiles", {required: true})
const selectFiles = defineModel<UploadFileDto[]>('selectFiles', { required: true })
function selectFile(file: UploadFileDto) {
if (tempFiles.value.length < max) {
tempFiles.value.push(file)
return true
} else {
MESSAGE.warning("可选择文件数量达到上限……")
MESSAGE.warning('可选择文件数量达到上限……')
return false
}
}
@@ -41,27 +41,38 @@ watch(showModal, async () => {
files.value = await loadFiles()
})
const tip_1 = computed(() => max > 1 ? `请选择至少 ${max} 个文件。` : "请选择一个文件。")
const tip_1 = computed(() => (max > 1 ? `请选择至少 ${max} 个文件。` : '请选择一个文件。'))
const tip_2 = computed(() => `允许的文件类型：${extensions.join('、')}。`)
</script>
<template>
<n-modal preset="card" style="max-width: 600px; max-height: 600px;" title="选择文件"
<n-modal
preset="card"
style="max-width: 600px; max-height: 600px"
title="选择文件"
content-scrollable
v-model:show="showModal">
v-model:show="showModal"
>
<n-flex vertical>
<n-alert type="info">
{{ tip_1 }}
{{ tip_2 }}
</n-alert>
<component :is="selectFilesCom(files, selectFile, removeFile)" />
<n-button type="primary" secondary @click="selectFiles = tempFiles; showModal = false;">
<n-button
type="primary"
secondary
@click="
() => {
selectFiles = tempFiles
showModal = false
}
"
>
确认选择
</n-button>
</n-flex>
</n-modal>
</template>
<style scoped>
</style>
<style scoped></style>
webui/src/components/file/UploadFileModal.vue
+32 -21
View File
@@ -1,37 +1,37 @@
<script setup lang="ts">
import {type UploadCustomRequestOptions, type UploadFileInfo} from "naive-ui";
import {api} from "@/tools/web.js";
import type {UploadFileDto} from "@/types/user.js";
import {shallowRef, useTemplateRef} from "vue";
import { type UploadCustomRequestOptions, type UploadFileInfo } from 'naive-ui'
import { api } from '@/tools/web.js'
import type { UploadFileDto } from '@/types/user.js'
import { shallowRef, useTemplateRef } from 'vue'
defineProps<{
afterLeave?: () => void;
afterLeave?: () => void
}>()
const showModal = defineModel("showModal", {required: true})
const showModal = defineModel('showModal', { required: true })
const upload = useTemplateRef("upload")
const upload = useTemplateRef('upload')
const fileList = shallowRef<UploadFileInfo[]>([])
async function handle_upload({ file, onFinish, onError, onProgress }: UploadCustomRequestOptions) {
const formData = new FormData();
const formData = new FormData()
console.log(file.file)
formData.append("file", file.file!)
formData.append('file', file.file!)
console.log(formData)
try {
const data = await api.post("/file/upload/", formData, {
const data = await api
.post('/file/upload/', formData, {
headers: {
'Content-Type': undefined // 取消全局默认的 application/json 很重要！！！！！！！！
'Content-Type': undefined, // 取消全局默认的 application/json 很重要！！！！！！！！
},
onUploadProgress: (progressEvent) => {
const percent = Math.ceil(
(progressEvent.loaded / progressEvent.total!) * 100
)
const percent = Math.ceil((progressEvent.loaded / progressEvent.total!) * 100)
onProgress({ percent }) // 更新进度条
}
}).then((res) => res.data as UploadFileDto)
},
})
.then((res) => res.data as UploadFileDto)
file.url = data.download_url
onFinish()
@@ -47,12 +47,23 @@ function onUpload() {
</script>
<template>
<n-modal style="width: 600px;" preset="card" v-model:show="showModal"
title="上传文件" content-scrollable
@after-leave="afterLeave">
<n-modal
style="width: 600px"
preset="card"
v-model:show="showModal"
title="上传文件"
content-scrollable
@after-leave="afterLeave"
>
<n-flex vertical>
<n-upload multiple ref="upload" :default-upload="false" list-type="image"
:custom-request="handle_upload" v-model:file-list="fileList">
<n-upload
multiple
ref="upload"
:default-upload="false"
list-type="image"
:custom-request="handle_upload"
v-model:file-list="fileList"
>
<n-upload-dragger>
<n-p>拖拽文件到此区域可以快速上传。</n-p>
</n-upload-dragger>
webui/src/components/file/upload-files.tsx
+20 -9
View File
@@ -1,30 +1,41 @@
import type {UploadFileDto} from "@/types/user.ts";
import FileThumbnail from "@/components/file/FileThumbnail.vue";
import {NEmpty, NFlex} from "naive-ui";
import type { UploadFileDto } from '@/types/user.ts'
import FileThumbnail from '@/components/file/FileThumbnail.vue'
import { NEmpty, NFlex } from 'naive-ui'
export function uploadFilesCom(files: UploadFileDto[]) {
if (files.length === 0) {
return <NEmpty description="你还没有上传任何文件。" size="large" />
}
return <NFlex>
return (
<NFlex>
{files.map((file: UploadFileDto) => {
return <FileThumbnail size={120} file={file}></FileThumbnail>;
return <FileThumbnail size={120} file={file}></FileThumbnail>
})}
</NFlex>
)
}
export function selectFilesCom(
files: UploadFileDto[],
onSelect: (file: UploadFileDto) => boolean,
onRemove: (file: UploadFileDto) => boolean
onRemove: (file: UploadFileDto) => boolean,
) {
if (files.length === 0) {
return <NEmpty description="你还没有上传任何文件。" size="large" />
}
return <NFlex>
return (
<NFlex>
{files.map((file: UploadFileDto) => {
return <FileThumbnail size={82} file={file} enableSelect onSelect={onSelect}
onRemove={onRemove}></FileThumbnail>;
return (
<FileThumbnail
size={82}
file={file}
enableSelect
onSelect={onSelect}
onRemove={onRemove}
></FileThumbnail>
)
})}
</NFlex>
)
}
webui/src/main.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import {createHead} from "@unhead/vue/client";
import { createHead } from '@unhead/vue/client'
import '@/assets/main.scss'
import '@/assets/beautiful.scss'
webui/src/pages/AdminPage.vue
+32 -32
View File
@@ -1,59 +1,59 @@
<script setup lang="ts">
import UserAction from "@/components/admin/UserAction.vue";
import type {MenuOption} from "naive-ui";
import {computed, onMounted, ref, useTemplateRef} from "vue";
import {useRouter} from "vue-router";
import {useNowUser} from "@/stores/now-user.js";
import {useHead} from "@unhead/vue";
import UserAction from '@/components/admin/UserAction.vue'
import type { MenuOption } from 'naive-ui'
import { computed, onMounted, ref, useTemplateRef } from 'vue'
import { useRouter } from 'vue-router'
import { useNowUser } from '@/stores/now-user.js'
import { useHead } from '@unhead/vue'
useHead({
titleTemplate: "%s | 管理面板 | NayHome"
titleTemplate: '%s | 管理面板 | NayHome',
})
const ROUTER = useRouter()
const NOWUSER = useNowUser()
const menu = useTemplateRef("menu")
const menu = useTemplateRef('menu')
const selectOption = ref("")
const selectOption = ref('')
const options = computed<MenuOption[]>(() => [
{
label: "总览",
key: "",
label: '总览',
key: '',
},
{
label: "用户",
key: "user-basic",
label: '用户',
key: 'user-basic',
children: [
{
label: "资料",
key: "user-info"
label: '资料',
key: 'user-info',
},
{
label: "安全",
key: "user-security"
}
]
label: '安全',
key: 'user-security',
},
],
},
{
label: "内容",
key: "user-creation",
label: '内容',
key: 'user-creation',
children: [
{
label: "上传",
key: "user-upload"
label: '上传',
key: 'user-upload',
},
{
label: "剧本",
key: "user-script"
}
]
label: '剧本',
key: 'user-script',
},
],
},
{
label: "NyaHome 管理后台",
key: "nyahome",
label: 'NyaHome 管理后台',
key: 'nyahome',
show: NOWUSER.is_admin,
}
},
])
function handleMenuClick(key: string) {
@@ -61,12 +61,12 @@ function handleMenuClick(key: string) {
}
onMounted(() => {
const key = ROUTER.currentRoute.value.fullPath.replace("/admin/", "")
const key = ROUTER.currentRoute.value.fullPath.replace('/admin/', '')
if (key) {
selectOption.value = key
menu.value?.showOption(key)
} else {
selectOption.value = ""
selectOption.value = ''
}
})
</script>
webui/src/pages/Chatroom1Page.vue
+16 -3
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import {useRoute} from 'vue-router'
import {onMounted, ref, useTemplateRef, watch} from 'vue'
import {onMounted, reactive, ref, useTemplateRef, watch} from 'vue'
import {api} from '@/tools/web.ts'
import type {ReturnDto} from '@/types/response.ts'
import type {Chatroom} from '@/types/chatroom.ts'
@@ -11,6 +11,14 @@ import ChatControlPanel from '@/components/chatroom/ChatControlPanel.vue'
import {fetchEventSource} from '@microsoft/fetch-event-source'
import type {AiiTokenInfo} from '@/types/aii.ts'
import {SEE_YOU_TOMORROW} from '@/types/syt.ts'
import {useHead} from '@unhead/vue'
const pageHead = reactive({
title: '正在加载聊天室...',
titleTemplate: '%s | 聊天室 | NyaHome'
})
useHead(pageHead)
const ROUTE = useRoute()
const MESSAGE = useMessage()
@@ -45,6 +53,7 @@ function load() {
}
})
.then((cr) => {
pageHead.title = cr.name
crName.value = cr.name
crDescription.value = cr.description
crFeatureImage.value = cr.feature_image
@@ -235,8 +244,12 @@ function enableSidebar() {
<template>
<div class="page-container">
<div class="main-column">
<chatroom-card :id="Number(ROUTE.params.id)" :name="crName" :description="crDescription"
:feature_image="crFeatureImage"/>
<chatroom-card
:id="Number(ROUTE.params.id)"
:name="crName"
:description="crDescription"
:feature_image="crFeatureImage"
/>
<chat-table
:content="crContent"
:aii-thinking
webui/src/pages/ChatroomPage.vue
+12 -3
View File
@@ -5,7 +5,12 @@ import {api} from '@/tools/web.ts'
import type {ChatroomPublic} from '@/types/chatroom.ts'
import type {ReturnDto} from '@/types/response.ts'
import ChatroomCreatorModal from '@/components/chatroom/ChatroomCreatorModal.vue'
import {useNowUser} from "@/stores/now-user.ts";
import {useNowUser} from '@/stores/now-user.ts'
import {useHead} from "@unhead/vue";
useHead({
title: "聊天室列表",
})
const NOWUSER = useNowUser()
@@ -23,9 +28,13 @@ function load() {
})
}
watch(() => NOWUSER.isLogin, () => {
watch(
() => NOWUSER.isLogin,
() => {
load()
}, {immediate: true})
},
{immediate: true},
)
</script>
<template>
webui/src/pages/WelcomePage.vue
+16 -2
View File
@@ -1,19 +1,33 @@
<script setup lang="ts">
import UserAction from '@/components/admin/UserAction.vue'
import { useHead } from '@unhead/vue'
useHead({
title: '首页',
})
</script>
<template>
<n-flex vertical style="padding: 6px 20px">
<div class="welcome-page">
<n-flex>
<n-card class="welcome-card" title="Welcome to Welcome!"></n-card>
<div class="user-action-card">
<user-action />
</div>
</n-flex>
</n-flex>
</div>
</template>
<style scoped>
div.welcome-page {
min-width: min(1200px, 90%);
width: min(1200px, 90%);
min-height: 0;
padding: 6px 20px;
display: flex;
flex-direction: column;
}
.welcome-card {
flex: 1;
}
webui/src/pages/admin/AdminNyahome.vue
+37 -37
View File
@@ -1,73 +1,71 @@
<script setup lang="ts">
import ConfigCard from "@/components/admin/ConfigCard.vue";
import {useHead} from "@unhead/vue";
import {ref} from "vue";
import {api} from "@/tools/web.ts";
import InDev from "@/components/InDev.vue";
import {useMessage} from "naive-ui";
import type {ReturnDto} from "@/types/response.ts";
import ConfigCard from '@/components/admin/ConfigCard.vue'
import { useHead } from '@unhead/vue'
import { ref } from 'vue'
import { api } from '@/tools/web.ts'
import InDev from '@/components/InDev.vue'
import { useMessage } from 'naive-ui'
import type { ReturnDto } from '@/types/response.ts'
interface SiteConfig {
site_name: string;
site_url: string;
backend_url: string;
site_name: string
site_url: string
backend_url: string
jwt_secret_key: string;
jwt_secret_key: string
smtp_enable: boolean;
smtp_sender: string;
smtp_hostname: string;
smtp_port: number;
smtp_username: string;
smtp_password: string;
smtp_use_tls: boolean;
smtp_enable: boolean
smtp_sender: string
smtp_hostname: string
smtp_port: number
smtp_username: string
smtp_password: string
smtp_use_tls: boolean
}
const MESSAGE = useMessage()
useHead({
title: "NyaHome 管理后台"
title: 'NyaHome 管理后台',
})
const siteConfig = ref<SiteConfig | null>(null);
const siteConfig = ref<SiteConfig | null>(null)
function getConfig() {
api.get("/admin/site_config/")
.then((res) => {
api.get('/admin/site_config/').then((res) => {
siteConfig.value = res.data as SiteConfig
MESSAGE.success("成功获取设置~")
MESSAGE.success('成功获取设置~')
})
}
function saveConfig() {
api.post("/admin/site_config/", JSON.stringify(siteConfig.value))
.then((res) => {
api.post('/admin/site_config/', JSON.stringify(siteConfig.value)).then((res) => {
siteConfig.value = res.data as SiteConfig
MESSAGE.success("保存并刷新设置成功~")
MESSAGE.success('保存并刷新设置成功~')
})
}
const testMailTo = ref("25565@qq.com")
const testMailTo = ref('25565@qq.com')
function sendTestMail() {
api.post("/admin/email-test/", JSON.stringify({to: testMailTo.value}))
.then(res => res.data as ReturnDto)
.then(data => data.success)
.then(success => {
api
.post('/admin/email-test/', JSON.stringify({ to: testMailTo.value }))
.then((res) => res.data as ReturnDto)
.then((data) => data.success)
.then((success) => {
if (success) {
MESSAGE.success("邮件发送成功，请稍等片刻，然后检查收件箱~")
MESSAGE.success('邮件发送成功，请稍等片刻，然后检查收件箱~')
} else {
MESSAGE.error("后端表示邮件发送失败，请检查日志输出。")
MESSAGE.error('后端表示邮件发送失败，请检查日志输出。')
}
})
}
</script>
<template>
<n-card>
<template #header>
<n-h3 prefix="bar" style="margin: 0;">NyaHome 管理后台</n-h3>
<n-h3 prefix="bar" style="margin: 0">NyaHome 管理后台</n-h3>
</template>
<template #header-extra>
<n-flex>
@@ -107,7 +105,8 @@ function sendTestMail() {
<n-input v-model:value="siteConfig.site_url" />
</n-form-item>
<n-alert type="info" class="in-form-alert">
如果您需要将 NyaHome 的前后端分开部署，则需要在此设置后端地址。您需要自行处理跨域问题。
如果您需要将 NyaHome
的前后端分开部署，则需要在此设置后端地址。您需要自行处理跨域问题。
</n-alert>
<n-form-item label="FastAPI 后端地址">
<n-input v-model:value="siteConfig.backend_url" />
@@ -175,7 +174,8 @@ function sendTestMail() {
</n-form>
<template #action>
<n-flex vertical>
<n-text>你可以在这里测试 NayHome 的邮件系统能否使用上述 SMTP
<n-text
>你可以在这里测试 NayHome 的邮件系统能否使用上述 SMTP
设置工作，这会发送一封测试邮件。
</n-text>
<n-input v-model:value="testMailTo" />
webui/src/pages/admin/AdminOverview.vue
+4 -4
View File
@@ -1,10 +1,10 @@
<script setup lang="ts">
import {useNowUser} from "@/stores/now-user.js";
import {computed} from "vue";
import {useHead} from "@unhead/vue";
import { useNowUser } from '@/stores/now-user.js'
import { computed } from 'vue'
import { useHead } from '@unhead/vue'
useHead({
title: "总览"
title: '总览',
})
const NOWUSER = useNowUser()
webui/src/pages/admin/AdminUserScript.vue
+4 -4
View File
@@ -1,16 +1,16 @@
<script setup lang="ts">
import InDev from "@/components/InDev.vue";
import {useHead} from "@unhead/vue";
import InDev from '@/components/InDev.vue'
import { useHead } from '@unhead/vue'
useHead({
title: "剧本"
title: '剧本',
})
</script>
<template>
<n-card>
<template #header>
<n-h3 prefix="bar" style="margin: 0;">个人剧本库</n-h3>
<n-h3 prefix="bar" style="margin: 0">个人剧本库</n-h3>
</template>
<in-dev />
webui/src/pages/admin/AdminUserSecurity.vue
+32 -37
View File
@@ -1,14 +1,14 @@
<script setup lang="ts">
import {useNowUser} from "@/stores/now-user.js";
import UserPasswordModal from "@/components/admin/UserPasswordModal.vue";
import {h, ref} from "vue";
import {api} from "@/tools/web.ts";
import {type DataTableColumn, NTag, NText} from "naive-ui";
import InDev from "@/components/InDev.vue";
import {useHead} from "@unhead/vue";
import { useNowUser } from '@/stores/now-user.js'
import UserPasswordModal from '@/components/admin/UserPasswordModal.vue'
import { h, ref } from 'vue'
import { api } from '@/tools/web.ts'
import { type DataTableColumn, NTag, NText } from 'naive-ui'
import InDev from '@/components/InDev.vue'
import { useHead } from '@unhead/vue'
useHead({
title: "用户安全"
title: '用户安全',
})
const NOWUSER = useNowUser()
@@ -16,8 +16,8 @@ const NOWUSER = useNowUser()
const showPasswordModal = ref(false)
interface SecureChange {
created_at: number;
type: "login" | "change_password" | "change_email" | "change_phone"
created_at: number
type: 'login' | 'change_password' | 'change_email' | 'change_phone'
old: string | null
new: string | null
}
@@ -26,50 +26,47 @@ const secureChanges = ref<SecureChange[]>([])
const columns = [
{
title: "记录时间",
key: "created_at",
title: '记录时间',
key: 'created_at',
render(row) {
const date = new Date(row.created_at * 1000)
return h(
NText,
{},
{default: () => date.toLocaleString()}
)
}
return h(NText, {}, { default: () => date.toLocaleString() })
},
},
{
title: "类型",
key: "type",
title: '类型',
key: 'type',
render: (row) => {
return h(
NTag,
{
type: "info"
type: 'info',
},
{default: () => row.type}
{ default: () => row.type },
)
}
},
},
{
title: "事件之前",
key: "old",
title: '事件之前',
key: 'old',
},
{
title: "事件之后",
key: "new",
}
title: '事件之后',
key: 'new',
},
] as DataTableColumn<SecureChange>[]
function loadSecureChanges() {
api.get("/admin/me/secure_changes/")
.then(res => secureChanges.value = res.data as SecureChange[])
api
.get('/admin/me/secure_changes/')
.then((res) => (secureChanges.value = res.data as SecureChange[]))
}
</script>
<template>
<n-card>
<template #header>
<n-h3 prefix="bar" style="margin: 0;">密码</n-h3>
<n-h3 prefix="bar" style="margin: 0">密码</n-h3>
</template>
<n-flex vertical>
@@ -89,7 +86,7 @@ function loadSecureChanges() {
<n-card>
<template #header>
<n-h3 prefix="bar" style="margin: 0;">其他登录方式</n-h3>
<n-h3 prefix="bar" style="margin: 0">其他登录方式</n-h3>
</template>
<n-flex vertical>
@@ -104,7 +101,7 @@ function loadSecureChanges() {
<n-card>
<template #header>
<n-h3 prefix="bar" style="margin: 0;">两步验证</n-h3>
<n-h3 prefix="bar" style="margin: 0">两步验证</n-h3>
</template>
<n-flex vertical>
@@ -118,7 +115,7 @@ function loadSecureChanges() {
<n-card>
<template #header>
<n-h3 prefix="bar" style="margin: 0;">安全事件记录</n-h3>
<n-h3 prefix="bar" style="margin: 0">安全事件记录</n-h3>
</template>
<n-flex vertical>
<n-data-table :columns :data="secureChanges" />
@@ -127,6 +124,4 @@ function loadSecureChanges() {
</n-card>
</template>
<style scoped>
</style>
<style scoped></style>
webui/src/pages/admin/AdminUserUpload.vue
+29 -25
View File
@@ -1,62 +1,66 @@
<script setup lang="ts">
import {ref, watch} from "vue";
import UploadFileModal from "@/components/file/UploadFileModal.vue";
import {api} from "@/tools/web.js";
import type {UploadFileDto} from "@/types/user.js";
import {useNowUser} from "@/stores/now-user.js";
import {uploadFilesCom} from "@/components/file/upload-files.js";
import {useHead} from "@unhead/vue";
import { ref, watch } from 'vue'
import UploadFileModal from '@/components/file/UploadFileModal.vue'
import { api } from '@/tools/web.js'
import type { UploadFileDto } from '@/types/user.js'
import { useNowUser } from '@/stores/now-user.js'
import { uploadFilesCom } from '@/components/file/upload-files.js'
import { useHead } from '@unhead/vue'
useHead({
title: "上传"
title: '上传',
})
const NOWUSER = useNowUser();
const NOWUSER = useNowUser()
const showUploadModal = ref(false)
const files = ref<UploadFileDto[]>([])
function load() {
api.get("/file/")
.then(res => {
api.get('/file/').then((res) => {
files.value = res.data as UploadFileDto[]
})
}
watch(() => NOWUSER.isLogin, () => {
watch(
() => NOWUSER.isLogin,
() => {
load()
}, {immediate: true})
},
{ immediate: true },
)
</script>
<template>
<n-card>
<template #header>
<n-h3 prefix="bar" style="margin: 0;">上传文件</n-h3>
<n-h3 prefix="bar" style="margin: 0">上传文件</n-h3>
</template>
<n-flex vertical>
<n-alert type="info">
接受的文件类型：
</n-alert>
<n-alert type="info"> 接受的文件类型： </n-alert>
<n-button @click="showUploadModal = true">打开上传向导</n-button>
<upload-file-modal v-model:show-modal="showUploadModal" :after-leave="() => {load()}"/>
<upload-file-modal
v-model:show-modal="showUploadModal"
:after-leave="
() => {
load()
}
"
/>
</n-flex>
</n-card>
<n-card>
<template #header>
<n-h3 prefix="bar" style="margin: 0;">个人文件库</n-h3>
</template>
<template #header-extra>
您已经上传的文件都在这里，可以选择性地删除以及重新下载。
<n-h3 prefix="bar" style="margin: 0">个人文件库</n-h3>
</template>
<template #header-extra> 您已经上传的文件都在这里，可以选择性地删除以及重新下载。 </template>
<component :is="uploadFilesCom(files)" />
</n-card>
</template>
<style scoped>
</style>
<style scoped></style>
webui/src/router/index.ts
+22 -22
View File
@@ -1,14 +1,14 @@
import { createRouter, createWebHashHistory } from 'vue-router'
import ChatroomPage from '@/pages/ChatroomPage.vue'
import WelcomePage from '@/pages/WelcomePage.vue'
import Chatroom1Page from "@/pages/Chatroom1Page.vue";
import AdminPage from "@/pages/AdminPage.vue";
import AdminOverview from "@/pages/admin/AdminOverview.vue";
import AdminUserInfo from "@/pages/admin/AdminUserInfo.vue";
import AdminUserSecurity from "@/pages/admin/AdminUserSecurity.vue";
import AdminUserUpload from "@/pages/admin/AdminUserUpload.vue";
import AdminNyahome from "@/pages/admin/AdminNyahome.vue";
import AdminUserScript from "@/pages/admin/AdminUserScript.vue";
import Chatroom1Page from '@/pages/Chatroom1Page.vue'
import AdminPage from '@/pages/AdminPage.vue'
import AdminOverview from '@/pages/admin/AdminOverview.vue'
import AdminUserInfo from '@/pages/admin/AdminUserInfo.vue'
import AdminUserSecurity from '@/pages/admin/AdminUserSecurity.vue'
import AdminUserUpload from '@/pages/admin/AdminUserUpload.vue'
import AdminNyahome from '@/pages/admin/AdminNyahome.vue'
import AdminUserScript from '@/pages/admin/AdminUserScript.vue'
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -34,36 +34,36 @@ const router = createRouter({
component: AdminPage,
children: [
{
name: "admin-overview",
path: "",
name: 'admin-overview',
path: '',
component: AdminOverview,
},
{
name: "admin-user-info",
path: "user-info",
name: 'admin-user-info',
path: 'user-info',
component: AdminUserInfo,
},
{
name: "admin-user-security",
path: "user-security",
name: 'admin-user-security',
path: 'user-security',
component: AdminUserSecurity,
},
{
name: "admin-user-upload",
path: "user-upload",
name: 'admin-user-upload',
path: 'user-upload',
component: AdminUserUpload,
},
{
name: "admin-user-script",
path: "user-script",
name: 'admin-user-script',
path: 'user-script',
component: AdminUserScript,
},
{
name: "admin-nyahome",
path: "nyahome",
name: 'admin-nyahome',
path: 'nyahome',
component: AdminNyahome,
}
]
},
],
},
],
})
webui/src/stores/now-user.ts
+1 -3
View File
@@ -22,9 +22,7 @@ export const useNowUser = defineStore('now-user', () => {
let user: UserDto
try {
user = await api
.get('/admin/me/')
.then((res) => res.data as UserDto)
user = await api.get('/admin/me/').then((res) => res.data as UserDto)
} catch (err) {
console.error(`请求用户信息时失败：${err}`)
throw err