🎨 代码完善
This commit is contained in:
parent
a4234532cd
commit
55d219b364
@ -2,6 +2,9 @@
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
root: true,
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
|
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="h-full bg-gray-100">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>一个微信机器人</title>
|
||||
</head>
|
||||
<body>
|
||||
<body style="min-height: 911px" class="h-full">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
1304
frontend/package-lock.json
generated
1304
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -13,7 +13,11 @@
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/vue": "^1.7.22",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"axios": "^1.7.2",
|
||||
"pinia": "^2.1.7",
|
||||
"qs": "^6.12.2",
|
||||
"vue": "^3.4.29",
|
||||
"vue-router": "^4.3.3"
|
||||
},
|
||||
@ -21,15 +25,20 @@
|
||||
"@rushstack/eslint-patch": "^1.8.0",
|
||||
"@tsconfig/node20": "^20.1.4",
|
||||
"@types/node": "^20.14.5",
|
||||
"@types/qs": "^6.9.15",
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.0",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"@vue/eslint-config-typescript": "^13.0.0",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"daisyui": "^4.12.10",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.23.0",
|
||||
"npm-run-all2": "^6.2.0",
|
||||
"postcss": "^8.4.39",
|
||||
"prettier": "^3.2.5",
|
||||
"tailwindcss": "^3.4.4",
|
||||
"typescript": "~5.4.0",
|
||||
"vite": "^5.3.1",
|
||||
"vue-tsc": "^2.0.21"
|
||||
|
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import MainNav from '@/components/MainNav.vue'
|
||||
import MainNav from '@/components/layout/MainNav.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
6
frontend/src/api/base.ts
Normal file
6
frontend/src/api/base.ts
Normal file
@ -0,0 +1,6 @@
|
||||
// 默认返回数据结构
|
||||
export type BaseResult<T> = {
|
||||
code: number;
|
||||
message: string;
|
||||
data?: T;
|
||||
};
|
43
frontend/src/api/contact.ts
Normal file
43
frontend/src/api/contact.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import { http } from '@/utils/http'
|
||||
import type { BaseResult } from '@/api/base'
|
||||
|
||||
/** 通讯录列表返回结果 */
|
||||
export type ContactItem = {
|
||||
/** 微信号 */
|
||||
CustomAccount: string,
|
||||
/** 昵称 */
|
||||
Nickname: string,
|
||||
/** 昵称拼音大写首字母 */
|
||||
Pinyin: string,
|
||||
/** 昵称拼音全拼 */
|
||||
PinyinAll: string,
|
||||
/** 微信原始Id */
|
||||
Wxid: string,
|
||||
/** 最后活跃时间 */
|
||||
LastActive: Date,
|
||||
/** 是否使用AI */
|
||||
EnableAi: boolean,
|
||||
/** AI模型 */
|
||||
AiModel: string,
|
||||
/** AI助手或者自定义提示词 */
|
||||
Prompt: string,
|
||||
/** 是否使用聊天排行 */
|
||||
EnableChatRank: boolean,
|
||||
/** 是否使用迎新 */
|
||||
EnableWelcome: boolean,
|
||||
/** 是否启用指令 */
|
||||
EnableCommand: boolean,
|
||||
/** 是否启用总结 */
|
||||
EnableSummary: boolean,
|
||||
/** 是否启用新闻 */
|
||||
EnableNews: boolean,
|
||||
/** 清理成员配置(多少天未活跃的) */
|
||||
ClearMember: number,
|
||||
/** 是否还在通讯库(群聊是要还在群里也算) */
|
||||
IsOk: boolean
|
||||
}
|
||||
|
||||
/** 获取首页基础信息 */
|
||||
export const getFriendList = () => {
|
||||
return http.request<BaseResult<Array<ContactItem>>>('get', '/api/contact/friend')
|
||||
}
|
BIN
frontend/src/assets/img/status-fail.png
Normal file
BIN
frontend/src/assets/img/status-fail.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 210 KiB |
BIN
frontend/src/assets/img/status-ok.png
Normal file
BIN
frontend/src/assets/img/status-ok.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 123 KiB |
@ -1,23 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
defineOptions({
|
||||
name: "MainNav"
|
||||
});
|
||||
|
||||
const navigation = [
|
||||
{ name: '首页', href: '/', current: true },
|
||||
{ name: '好友列表', href: '/friend', current: false },
|
||||
{ name: '群组', href: '/group', current: false },
|
||||
{ name: 'AI角色', href: '/assistant', current: false },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav>
|
||||
<RouterLink v-for="item in navigation" :key="item.name" :to="item.href" :class="{ 'bg-gray text-white': item.current, 'text-gray': !item.current }" class="px-3 py-2 rounded-md text-sm font-medium">
|
||||
{{ item.name }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<RouterView />
|
||||
</template>
|
3
frontend/src/components/contact/index.vue
Normal file
3
frontend/src/components/contact/index.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
|
||||
</template>
|
73
frontend/src/components/layout/MainNav.vue
Normal file
73
frontend/src/components/layout/MainNav.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'MainNav'
|
||||
})
|
||||
|
||||
const navigation = [
|
||||
{ name: '首页', href: '/', current: true },
|
||||
{ name: '好友列表', href: '/friend', current: false },
|
||||
{ name: '群组', href: '/group', current: false },
|
||||
{ name: 'AI角色', href: '/assistant', current: false }
|
||||
]
|
||||
|
||||
// 设置当前选中的导航
|
||||
const setCurrent = (href: string) => {
|
||||
navigation.forEach(item => {
|
||||
item.current = item.href === href
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-full">
|
||||
<div class="bg-green-600 pb-32">
|
||||
<Disclosure as="nav" class="border-b border-green-300 border-opacity-25 bg-green-600 lg:border-none">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
|
||||
<div
|
||||
class="relative flex h-16 items-center justify-between lg:border-b lg:border-green-400 lg:border-opacity-25">
|
||||
<div class="flex items-center px-2 lg:px-0">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="block h-8 w-8" src="../../assets/img/logo.png" alt="Your Company" />
|
||||
</div>
|
||||
<div class="hidden lg:ml-10 lg:block">
|
||||
<div class="flex space-x-4">
|
||||
<a v-for="item in navigation" :key="item.name" :href="item.href"
|
||||
:class="[item.current ? 'bg-green-700 text-white' : 'text-white hover:bg-green-500 hover:bg-opacity-75', 'rounded-md px-3 py-2 text-sm font-medium']"
|
||||
:aria-current="item.current ? 'page' : undefined" @click="setCurrent(item.href)">{{ item.name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure>
|
||||
<header class="py-10">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl font-bold tracking-tight text-white">Dashboard</h1>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<main class="-mt-32">
|
||||
<div class="mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
|
||||
<div class="rounded-lg bg-white px-5 py-6 shadow sm:px-6">
|
||||
<RouterView />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="border-t border-gray-200 py-8 text-center text-sm text-gray-500 sm:text-left">
|
||||
<span class="block sm:inline">本项目完全开源,开源地址: </span>
|
||||
<span class="block sm:inline text-red-500">
|
||||
<a target="_blank" href="https://gitee.ltd/lxh/go-wxhelper">https://gitee.ltd</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</template>
|
@ -4,6 +4,9 @@ import { createPinia } from 'pinia'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
// Tailwind CSS
|
||||
import "tailwindcss/tailwind.css";
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
|
136
frontend/src/utils/http/index.ts
Normal file
136
frontend/src/utils/http/index.ts
Normal file
@ -0,0 +1,136 @@
|
||||
import Axios, {
|
||||
type AxiosInstance,
|
||||
type AxiosRequestConfig,
|
||||
type CustomParamsSerializer,
|
||||
type AxiosResponse
|
||||
} from 'axios'
|
||||
import type { HttpError, RequestMethods } from './types.d'
|
||||
import { stringify } from 'qs'
|
||||
|
||||
// 相关配置请参考:www.axios-js.com/zh-cn/docs/#axios-request-config-1
|
||||
const defaultConfig: AxiosRequestConfig = {
|
||||
// 请求超时时间
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
// 数组格式参数序列化(https://github.com/axios/axios/issues/5142)
|
||||
paramsSerializer: {
|
||||
serialize: stringify as unknown as CustomParamsSerializer
|
||||
}
|
||||
}
|
||||
|
||||
class Http {
|
||||
constructor() {
|
||||
this.httpInterceptorsRequest()
|
||||
this.httpInterceptorsResponse()
|
||||
}
|
||||
|
||||
/** 初始化配置对象 */
|
||||
private static initConfig: AxiosRequestConfig = {}
|
||||
|
||||
/** 保存当前`Axios`实例对象 */
|
||||
private static axiosInstance: AxiosInstance = Axios.create(defaultConfig)
|
||||
|
||||
/** 请求拦截 */
|
||||
private httpInterceptorsRequest(): void {
|
||||
Http.axiosInstance.interceptors.request.use(
|
||||
async (config: AxiosRequestConfig): Promise<any> => {
|
||||
// 开启进度条动画
|
||||
// NProgress.start();
|
||||
// 优先判断post/get等方法是否传入回调,否则执行初始化设置等回调
|
||||
// if (typeof config.beforeRequestCallback === 'function') {
|
||||
// config.beforeRequestCallback(config)
|
||||
// return config
|
||||
// }
|
||||
// if (Http.initConfig.beforeRequestCallback) {
|
||||
// Http.initConfig.beforeRequestCallback(config)
|
||||
// return config
|
||||
// }
|
||||
return config
|
||||
},
|
||||
(error: HttpError) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/** 响应拦截 */
|
||||
private httpInterceptorsResponse(): void {
|
||||
const instance = Http.axiosInstance
|
||||
instance.interceptors.response.use(
|
||||
(response: AxiosResponse) => {
|
||||
// const $config = response.config
|
||||
// 关闭进度条动画
|
||||
// NProgress.done()
|
||||
// 优先判断post/get等方法是否传入回调,否则执行初始化设置等回调
|
||||
// if (typeof $config.beforeResponseCallback === 'function') {
|
||||
// $config.beforeResponseCallback(response)
|
||||
// return response.data
|
||||
// }
|
||||
// if (Http.initConfig.beforeResponseCallback) {
|
||||
// Http.initConfig.beforeResponseCallback(response)
|
||||
// return response.data
|
||||
// }
|
||||
return response.data
|
||||
},
|
||||
(error: HttpError) => {
|
||||
const $error = error
|
||||
$error.isCancelRequest = Axios.isCancel($error)
|
||||
// 关闭进度条动画
|
||||
// NProgress.done()
|
||||
// 所有的响应异常 区分来源为取消请求/非取消请求
|
||||
return Promise.reject($error)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/** 通用请求工具函数 */
|
||||
public request<T>(
|
||||
method: RequestMethods,
|
||||
url: string,
|
||||
param?: AxiosRequestConfig,
|
||||
axiosConfig?: AxiosRequestConfig
|
||||
): Promise<T> {
|
||||
const config = {
|
||||
method,
|
||||
url,
|
||||
...param,
|
||||
...axiosConfig
|
||||
} as AxiosRequestConfig
|
||||
|
||||
// 单独处理自定义请求/响应回调
|
||||
return new Promise((resolve, reject) => {
|
||||
Http.axiosInstance
|
||||
.request<T>(config)
|
||||
.then((response: any): void => {
|
||||
return resolve(response)
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/** 单独抽离的`post`工具函数 */
|
||||
public post<T, P>(
|
||||
url: string,
|
||||
params?: AxiosRequestConfig<P>,
|
||||
config?: AxiosRequestConfig
|
||||
): Promise<T> {
|
||||
return this.request<T>('post', url, params, config)
|
||||
}
|
||||
|
||||
/** 单独抽离的`get`工具函数 */
|
||||
public get<T, P>(
|
||||
url: string,
|
||||
params?: AxiosRequestConfig<P>,
|
||||
config?: AxiosRequestConfig
|
||||
): Promise<T> {
|
||||
return this.request<T>('get', url, params, config)
|
||||
}
|
||||
}
|
||||
|
||||
export const http = new Http()
|
43
frontend/src/utils/http/types.d.ts
vendored
Normal file
43
frontend/src/utils/http/types.d.ts
vendored
Normal file
@ -0,0 +1,43 @@
|
||||
import type {
|
||||
Method,
|
||||
AxiosError,
|
||||
AxiosResponse,
|
||||
AxiosRequestConfig
|
||||
} from "axios";
|
||||
|
||||
export type RequestMethods = Extract<
|
||||
Method,
|
||||
"get" | "post" | "put" | "delete" | "patch" | "option" | "head"
|
||||
>;
|
||||
|
||||
export interface HttpError extends AxiosError {
|
||||
isCancelRequest?: boolean;
|
||||
}
|
||||
|
||||
export interface HttpResponse extends AxiosResponse {
|
||||
config: HttpRequestConfig;
|
||||
}
|
||||
|
||||
export interface HttpRequestConfig extends AxiosRequestConfig {
|
||||
beforeRequestCallback?: (request: HttpRequestConfig) => void;
|
||||
beforeResponseCallback?: (response: HttpResponse) => void;
|
||||
}
|
||||
|
||||
export default class Http {
|
||||
request<T>(
|
||||
method: RequestMethods,
|
||||
url: string,
|
||||
param?: AxiosRequestConfig,
|
||||
axiosConfig?: HttpRequestConfig
|
||||
): Promise<T>;
|
||||
post<T, P>(
|
||||
url: string,
|
||||
params?: T,
|
||||
config?: HttpRequestConfig
|
||||
): Promise<P>;
|
||||
get<T, P>(
|
||||
url: string,
|
||||
params?: T,
|
||||
config?: HttpRequestConfig
|
||||
): Promise<P>;
|
||||
}
|
25
frontend/src/views/friend/hook.tsx
Normal file
25
frontend/src/views/friend/hook.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import { type ContactItem, getFriendList } from '@/api/contact'
|
||||
|
||||
// 起飞
|
||||
export function useHook() {
|
||||
const dataList = ref<ContactItem[]>([]);
|
||||
|
||||
// 获取数据
|
||||
async function onSearch() {
|
||||
const { data } = await getFriendList();
|
||||
dataList.value = data;
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
// 挂载时执行
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
dataList,
|
||||
onSearch
|
||||
}
|
||||
}
|
@ -1,12 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import { useHook } from '@/views/friend/hook'
|
||||
|
||||
defineOptions({
|
||||
name: "FriendPage"
|
||||
});
|
||||
|
||||
const { dataList, onSearch } = useHook()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<h1>好友列表</h1>
|
||||
</main>
|
||||
<ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
|
||||
<li class="overflow-hidden rounded-xl border border-gray-200" v-for="item in dataList" :key="item.Wxid">
|
||||
<div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
|
||||
<img v-if="item.IsOk" src="@/assets/img/status-ok.png" alt="Tuple" class="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10">
|
||||
<img v-else src="@/assets/img/status-fail.png" alt="Tuple" class="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10">
|
||||
|
||||
<div class="flex-1">
|
||||
<div class="text-sm font-medium leading-6 text-gray-900">{{ item.Nickname }}</div>
|
||||
<span v-if="item.IsOk"
|
||||
class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">在通讯录</span>
|
||||
<span v-else
|
||||
class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20">不在通讯录</span>
|
||||
</div>
|
||||
</div>
|
||||
<dl class="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
|
||||
<div class="flex justify-between gap-x-4 py-3">
|
||||
<dt class="text-gray-500">原始微信Id<br/>微信号</dt>
|
||||
<dd>
|
||||
<div class="text-gray-700">{{ item.Wxid }}</div>
|
||||
<div class="truncate text-gray-500">{{ item.CustomAccount }}</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex justify-between gap-x-4 py-3">
|
||||
<dt class="text-gray-500">最后活跃时间</dt>
|
||||
<dd class="flex items-start gap-x-2">
|
||||
<div class="font-medium text-gray-900">
|
||||
{{ item.LastActive }}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
@ -7,6 +7,6 @@ defineOptions({
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<h1>首页</h1>
|
||||
<h1 class="text-orange-700">首页</h1>
|
||||
</main>
|
||||
</template>
|
||||
|
12
frontend/tailwind.config.js
Normal file
12
frontend/tailwind.config.js
Normal file
@ -0,0 +1,12 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx,md}'],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: '2rem',
|
||||
},
|
||||
},
|
||||
plugins: [require('daisyui'), require('@tailwindcss/forms'),],
|
||||
}
|
||||
|
@ -6,6 +6,16 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
// target: "https://graduate.frps.ltd",
|
||||
target: "http://127.0.0.1:8080",
|
||||
changeOrigin: true
|
||||
// rewrite: path => path.replace(/^\/api/, "")
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx(),
|
||||
|
@ -21,6 +21,7 @@
|
||||
<main class="-mt-32">
|
||||
<div class="mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
|
||||
<div class="rounded-lg bg-white px-5 py-6 shadow sm:px-6 text-2xl">
|
||||
|
||||
<ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
|
||||
{{ range .friends }}
|
||||
<li class="overflow-hidden rounded-xl border border-gray-200">
|
||||
|
@ -21,6 +21,7 @@
|
||||
<main class="-mt-32">
|
||||
<div class="mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
|
||||
<div class="rounded-lg bg-white px-5 py-6 shadow sm:px-6 text-2xl">
|
||||
<!-- 正文开始 -->
|
||||
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
|
||||
<div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
|
||||
<dt class="truncate text-sm font-medium text-gray-500">好友数量</dt>
|
||||
|
Loading…
Reference in New Issue
Block a user