senset/reCoreD-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui base data struct

Browse Source
This commit is contained in:
Sense T
2024-04-07 14:36:55 +08:00
parent 3449df913c
commit 5a266e9e6c
9 changed files with 473 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
web/src/apis/api.ts Normal file
View File

@@ -0,0 +1,113 @@
import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse, type InternalAxiosRequestConfig } from "axios";
import { useLoadingBar, useNotification } from 'naive-ui'
import { type Record } from '@/stores/records';
import { type Domain } from "@/stores/domains";
type Result<T> = {
success: boolean
message: string
data: T
}
export class Request {
private instance: AxiosInstance;
private baseConfig: AxiosRequestConfig = { baseURL: "api/v1" }
private loadingBar = useLoadingBar()
private notification = useNotification()
private messages = new Map<number, {
title: string, content: string
}>(
// TODO: i18n
[
[400, {
title: "请求错误 (400)",
content: "参数提交错误"
}],
[401, {
title: "未授权 (401)",
content: "请刷新页面重新登录"
}],
[403, {
title: "拒绝访问 (403)",
content: "你没有权限！"
}],
[404, {
title: "查无此项 (404)",
content: "没有该项内容"
}],
[500, {
title: "服务器错误 (500)",
content: "请检查系统日志"
}]
]
)
constructor(config: AxiosRequestConfig) {
this.instance = axios.create(Object.assign(this.baseConfig, config))
this.setupInceptors()
}
private setupInceptors() {
this.setupRequestInterceptors()
this.setupResponseInterceptors()
}
private setupRequestInterceptors() {
const fulFilled = (res: InternalAxiosRequestConfig<any>) => {
this.loadingBar.start()
return res
}
const onError = (err: any) => {
this.loadingBar.error()
return Promise.reject(err)
}
this.instance.interceptors.request.use(fulFilled, onError)
}
private setupResponseInterceptors() {
const fulFilled = (res: AxiosResponse) => {
this.loadingBar.finish()
return res
}
const onError = (err: any) => {
this.loadingBar.error()
const msg = this.messages.get(err.response.status)
if (msg) {
this.notification.error(msg)
} else {
console.log(err.response)
this.notification.error({
title: "未知错误",
content: "请打开控制台了解详情"
})
}
return Promise.reject(err.response)
}
this.instance.interceptors.response.use(fulFilled, onError)
}
public request(config: AxiosRequestConfig): Promise<AxiosResponse> {
return this.instance.request(config)
}
public get<T = Record[] | Domain[]>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<Result<T>>> {
return this.instance.get(url, config)
}
public post<T = Record | Domain>(url: string, data?: T, config?: AxiosRequestConfig): Promise<AxiosResponse<Result<T>>> {
return this.instance.post(url, data, config)
}
public put<T = Record | Domain>(url: string, data?: T, config?: AxiosRequestConfig): Promise<AxiosResponse<Result<null>>> {
return this.instance.put(url, data, config)
}
public delete(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<Result<null>>> {
return this.instance.delete(url, config)
}
}
export default new Request({})

4
web/src/router/index.ts
View File

@@ -1,8 +1,8 @@
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
history: createWebHashHistory(),
routes: [
{
path: '/',

12
web/src/stores/counter.ts
View File

@@ -1,12 +0,0 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})

19
web/src/stores/domains.ts
View File

@@ -1,5 +1,6 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import api from '@/apis/api'
export type Domain = {
id: number;
@@ -42,33 +43,35 @@ export const useDomainStore = defineStore('domains', () => {
const domains = ref<Domain[]>([])
const domainsGetter = computed(() => domains.value)
function loadDomains() {
async function loadDomains() {
// TODO: load from api
domains.value = import.meta.env.DEV ? domainDevData : []
domains.value = import.meta.env.DEV ?
domainDevData :
(await api.get<Domain[]>('/domains')).data.data
}
function addDomain(domain: Domain) {
async function addDomain(domain: Domain) {
// TODO: load from api
if (!import.meta.env.DEV) {
//domain =
domain = (await api.post("/domains", domain)).data.data
}
domains.value.push(domain)
}
function updateDomain(domain: Domain) {
async function updateDomain(domain: Domain) {
// TODO: load from api
if (!import.meta.env.DEV) {
//domain =
await api.put("/domains", domain)
}
domains.value = domains.value.map(e => e.id === domain.id ? domain : e)
}
function removeDomain(domain: Domain) {
async function removeDomain(domain: Domain) {
// TODO: load from api
if (!import.meta.env.DEV) {
//domain =
await api.delete(`/domains/${domain.id}`)
}
domains.value = domains.value.filter(e => e.id !== domain.id)

19
web/src/stores/records.ts
View File

@@ -1,3 +1,4 @@
import api from '@/apis/api';
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
@@ -197,33 +198,35 @@ export const useRecordStore = defineStore('records', () => {
const records = ref<Record[] | undefined>([])
const recordsGetter = computed(() => records.value)
function loadRecords(domain: string) {
async function loadRecords(domain: string) {
// TODO: load from api
records.value = import.meta.env.DEV ? recordDevData.get(domain) : []
records.value = import.meta.env.DEV ?
recordDevData.get(domain) :
(await api.get<Record[]>(`/records/${domain}`)).data.data
}
function addRecord(domain: string, record: Record) {
async function addRecord(domain: string, record: Record) {
// TODO: load from api
if (!import.meta.env.DEV) {
//record =
record = (await api.post(`/records/${domain}`, record)).data.data
}
records.value?.push(record)
}
function updateRecord(domain: string, record: Record) {
async function updateRecord(domain: string, record: Record) {
// TODO: load from api
if (!import.meta.env.DEV) {
//record =
await api.put(`/records/${domain}`, record)
}
records.value = records.value?.map(e => e.id === record.id ? record : e)
}
function removeRecord(domain: string, record: Record) {
async function removeRecord(domain: string, record: Record) {
// TODO: load from api
if (!import.meta.env.DEV) {
//record =
await api.delete(`/records/${domain}/${record.id}`)
}
records.value = records.value?.filter(e => e.id !== record.id)