🎨 代码完善

This commit is contained in:
李寻欢 2024-07-04 17:16:37 +08:00
parent a4234532cd
commit 55d219b364
23 changed files with 1679 additions and 71 deletions

View File

@ -2,6 +2,9 @@
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
env: {
node: true,
},
root: true,
'extends': [
'plugin:vue/vue3-essential',

View File

@ -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>

File diff suppressed because it is too large Load Diff

View File

@ -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"

View File

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

View File

@ -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
View File

@ -0,0 +1,6 @@
// 默认返回数据结构
export type BaseResult<T> = {
code: number;
message: string;
data?: T;
};

View 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')
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

View File

@ -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>

View File

@ -0,0 +1,3 @@
<template>
</template>

View 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>

View File

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

View 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
View 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>;
}

View 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
}
}

View File

@ -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>

View File

@ -7,6 +7,6 @@ defineOptions({
<template>
<main>
<h1>首页</h1>
<h1 class="text-orange-700">首页</h1>
</main>
</template>

View 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'),],
}

View File

@ -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(),

View File

@ -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">

View File

@ -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>