computerization / enspire

Make "Creativity, Activity, Service (CAS)" Great Again at SWFLA

---

C 社是服务类社团，其创始初心是为学校生活提供便利，如今我们发现，同学们 CAS 活动中遇到的管理、技术、宣传问题，是一个巨大的需求缺口

Enspire 的目标很简单，Make CAS life easier for everyone

如果你不了解开源项目是什么，可以参考这个网站

本地运行

安装依赖

pnpm install

配置环境变量

cp .env.example .env

并编辑其中内容。

初始化数据库

prisma generate

导入社团信息

pnpm run update-club-info

运行开发服务器

pnpm run dev

浏览器访问 http://localhost:3000 即可。

WebStorm 兼容性问题

pnpm & Prisma

WebStorm + pnpm + Prisma 目前存在兼容性问题，目前解决方式如下:

• 每次更新 Prisma 后于左侧文件目录中查找 node_modules/.pnpm/@[email protected]
• 右键 > Mark Directory as > Not Excluded

ESLint 错误

如果您遇到 WebStorm 于代码窗口上提示 ESLint: Error: invalid Options，请尝试将 WebStorm IDE 更新至最新版本。

技术细节

该项目主要依赖的库及平台如下：

• Nuxt (前端&后端)
• Prisma (数据库)
• Tailwind (CSS)
• Shadcn-vue (前端组件库)
• Clerk (用户管理)

---

欢迎其它社团及学校联系合作。

enspire's Issues

Move `/pages/cas/leave.vue` to `/pages/manage/leave.vue`

That's it

I'm too lazy to create a new brach on my fork for such a simple action

Feat: Admin Panel

I'm planning to use a lowcode platform (ReTools maybe?) as admin panel for the CAS group because their actions are mainly direct interactions with the database. That way we won't need to spend the time on building separate UI elements.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update actions/checkout action to v4.1.7
• chore(deps): update sentry-javascript monorepo to v8 (major) (@sentry/node, @sentry/profiling-node)

Detected dependencies

github-actions

.github/workflows/quality.yml

• actions/checkout v4.1.1
• actions/setup-node v4.0.2
• pnpm/action-setup v3
• actions/cache v4
• actions/checkout v4.1.1
• actions/setup-node v4.0.2
• pnpm/action-setup v3
• actions/cache v4
• actions/checkout v4.1.1
• webiny/action-conventional-commits v1.3.0

.github/workflows/update-club-info.yml

• actions/checkout v4
• actions/setup-node v4
• pnpm/action-setup v3
• actions/cache v4

npm

package.json

• @clerk/clerk-sdk-node ^5.0.11
• @clerk/themes ^2.1.9
• @nuxt/content ^2.12.1
• @radix-icons/vue ^1.0.0
• @tanstack/vue-table ^8.17.3
• @vee-validate/zod ^4.13.1
• @vite-pwa/nuxt ^0.8.0
• @vueuse/core ^10.11.0
• class-variance-authority ^0.7.0
• clsx ^2.1.1
• date-fns ^3.6.0
• h3 ^1.11.1
• h3-clerk ^0.4.5
• iron-webcrypto ^1.2.1
• lucide-vue-next ^0.395.0
• nitropack 2.9.6
• radix-vue ^1.8.4
• tailwind-merge ^2.3.0
• tailwindcss-animate ^1.0.7
• uncrypto ^0.1.3
• unstorage ^1.10.2
• uuid ^10.0.0
• v-calendar ^3.1.2
• vee-validate ^4.13.1
• vue-clerk ^0.4.3
• zod ^3.23.8
• @antfu/eslint-config ^2.21.1
• @nuxt/fonts ^0.7.0
• @nuxtjs/google-fonts ^3.2.0
• @nuxtjs/tailwindcss ^6.12.0
• @prisma/client ^5.15.0
• @rollup/plugin-wasm ^6.2.2
• @sentry/node ^7.117.0
• @sentry/profiling-node ^7.110.0
• @sentry/vue ^8.9.2
• @tailwindcss/typography ^0.5.13
• @types/uuid ^9.0.8
• @types/ws ^8.5.10
• eslint ^9.5.0
• nuxt 3.12.2
• nuxt-icon ^0.6.10
• nuxt-svgo ^4.0.1
• prisma ^5.15.0
• shadcn-nuxt ^0.10.4
• ts-node ^10.9.2
• tsx ^4.15.6
• typescript ^5.4.5
• vue ^3.4.29
• vue-router ^4.3.3
• vue-tsc ^2.0.21

---

• Check this box to trigger a request for Renovate to run again on this repository

feat: PWA

We do need a proper PWA support. We wont't pay $100 tax to Apple.

• Initial PWA support

Richer installation UI

• Description
• Screenshots

Native integration

• Maskable icon
• Monochrome Icon (Useful for Android phones with Monet icons; implemented by W3C but not yet implemented by browsers)
• Dynamic theme_color and background_color (Still not implemented by W3C)

Perf: club overview page re-renders every time

It is common to jump between individual club pages and the club overview page. (e.g. between https://theenspire.com/clubs and https://theenspire.com/clubs/computerization)

There are two problems:

1. Every time we visit another page and go back to the overview, the page re-renders. This is troublesome because:
   • The state (scroll position, expanded subsections) is not preserved;
   • The connection is rather slow.
2. The images in the collapsed sections should be eagerly rendered as well, because it is frustrating to expand each section and still wait for the images to load.

I think this can be solved by adding KeepAlive somewhere. I need further information on what are the requests sent on each load, and which should be cached.

bug: Sentry causes a 500 error on Vercel

This only happens on Vercel. 500 is returned, but no logs in the backend indicating any sort of error. Sentry is disabled for now, we'll need to investigate once we have time.

Feature: About page

Why?

Your almighty club president wants that.

What should we do?

Two parts:

1. About Computerization. Add our description and our alumni list.
2. Changelog. Use nuxt/content.

This should be fully frontend so it's quite easy.

Logo!

For anyone who has ideas for Enspire's logo, sumbit here.

Feature: Leave request

Why?

The CAS group wants that ;-)

What do we need?

This leave request should be only available to club leaders, as a way to tell the CAS group that they've got no activities today.

Suggestion: display the disbanded clubs at the end of the list of club cards

As described in the title.
@at-wr

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

Feature: New Members Recruitment

Why?

1. Clubs always set up a WeChat group chat for recruitment. However as the 入群二维码 are public, there are always unwanted god-knows-who users not even from the school sending advertisements.
2. New 10th-graders don't really know the information about all the clubs.

What do we need?

Complete the "详细信息" in the club info page. When the button is clicked, we should navigate to a new page with infos about this club like club name, club introduction, past awards (we need to ask the CAS group for that) etc. And during club recruitment session, we need to show QR code of the clubs' WeChat groups. So there should also be an admin component for club leaders to update the QR code.

enhancement: Responsive modal

Currently we use <Dialog /> component for modals, but it isn't too beautiful on mobile. We should create a responsive one which shows <Dialog /> on desktop and <Drawer /> on mobile.

There is already an attempt to do that with react, so I guess it won't be too complicated.

Feature: Rating

Why?

Don't ask me why. The CAS group wants that.

What do we need?

A new tab that shows up only at the end of semester (use v-if, not a display:none like dumb TSIMS). Club members should be able to give a rating and suggestion anonymously (shown to the CAS group anonymously, but in the database we should record with their names cuz there should be only one rating to one club for one user) . President and vice president of the club can't give suggestions to their own clubs. The results are only visible to the CAS group.

Feature: Classroom Reservation

Why?

1. For the CAS group in the student union, clubs constantly switch places and club leaders just send WeChat messages to the CAS group. This feature lets the club leaders to report this kind of action to one unified platform, and CAS group members can just visit the classrooms according to this platform.
2. For club leaders, we do have a classroom reservation spreadsheet shared by the CAS group. But who knows which classroom is where!

What do we need

We should provide two views for the reservation panel. First one is a simple map like a fire evacuation map. You tap on the classroom then it pops up with information of it, whether it is used by another club on that day etc.. Second one is a spreadsheet-like list.

This feature should only be available for club leaders. Don't let them reserve if there's already a club occupying the classroom on that day. There should be two types of reservation, one is for long-term, one is just for that day.

TSIMS now requires CAPTCHA to login

The binding process needs to access the login endpoint to check whether this TSIMS account is really owned by the user.

Enspire/server/api/bind/index.post.ts

Lines 34 to 52 in f1bb6e5

	const tsimsRawLoginResult = await $fetch<string>('http://101.230.1.173:6300/php/login.php', {
	method: 'POST',
	credentials: 'include',
	headers: {
	'content-type': 'application/x-www-form-urlencoded',
	},
	body: `username=${result.data.username}&password=${result.data.password}`,
	onResponse(context) {
	sessionCookie = context.response.headers.get('set-cookie') ?? ''
	},
	})
	const tsimsLoginResult: TsimsLoginResult = JSON.parse(tsimsRawLoginResult)
	if (tsimsLoginResult.status !== 'ok') {
	throw createError({
	statusCode: 403,
	statusMessage: 'Login Credentials Incorrect',
	})
	}