chore: 初始化 monorepo 脚手架与代码骨架

- Bun workspaces:apps/web(Vue 3.5 + Vite 8 + naive-ui)· apps/server(Hono 4.13 + Drizzle)· packages/shared(契约类型)
- 代码骨架:四表 Drizzle schema · 11 个端点占位(501)· 管理面口令中间件 · 同步引擎占位(5 分钟 tick + 防重入)
- 命令链:dev / build / test / lint / type-check / db:*(见 AGENTS.md)
This commit is contained in:
2026-09-14 23:54:58 +08:00
parent 45b312b357
commit 138a1b7685
50 changed files with 2739 additions and 0 deletions
+8
View File
@@ -0,0 +1,8 @@
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf
max_line_length = 100
+1
View File
@@ -0,0 +1 @@
* text=auto eol=lf
+39
View File
@@ -0,0 +1,39 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo
.eslintcache
# Cypress
/cypress/videos/
/cypress/screenshots/
# Vitest
__screenshots__/
# Vite
*.timestamp-*-*.mjs
+10
View File
@@ -0,0 +1,10 @@
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": ["eslint", "typescript", "unicorn", "oxc", "vue", "vitest"],
"env": {
"browser": true
},
"categories": {
"correctness": "error"
}
}
+6
View File
@@ -0,0 +1,6 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"singleQuote": true,
"printWidth": 100
}
+1
View File
@@ -0,0 +1 @@
/// <reference types="vite/client" />
+32
View File
@@ -0,0 +1,32 @@
import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import pluginVitest from '@vitest/eslint-plugin'
import pluginOxlint from 'eslint-plugin-oxlint'
import skipFormatting from 'eslint-config-prettier/flat'
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
export default defineConfigWithVueTs(
{
name: 'app/files-to-lint',
files: ['**/*.{vue,ts,mts,tsx}'],
},
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
...pluginVue.configs['flat/essential'],
vueTsConfigs.recommended,
{
...pluginVitest.configs.recommended,
files: ['src/**/__tests__/*'],
},
...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
skipFormatting,
)
+13
View File
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
+54
View File
@@ -0,0 +1,54 @@
{
"name": "@naku/web",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"test:unit": "vitest",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "run-s \"lint:*\"",
"lint:oxlint": "oxlint . --fix",
"lint:eslint": "eslint . --fix --cache",
"format": "prettier --write --experimental-cli src/"
},
"dependencies": {
"@naku/shared": "workspace:*",
"naive-ui": "^2.45.3",
"vue": "^3.5.40",
"vue-router": "^5.2.0"
},
"devDependencies": {
"@tsconfig/node24": "^24.0.4",
"@types/jsdom": "^28.0.3",
"@types/node": "^24.13.3",
"@vitejs/plugin-vue": "^6.0.8",
"@vitest/eslint-plugin": "^1.6.23",
"@vue/eslint-config-typescript": "^14.9.0",
"@vue/test-utils": "^2.4.11",
"@vue/tsconfig": "^0.9.1",
"eslint": "^10.7.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-oxlint": "~1.73.0",
"eslint-plugin-vue": "~10.9.2",
"jiti": "^2.7.0",
"jsdom": "^29.1.1",
"npm-run-all2": "^9.0.2",
"oxlint": "~1.74.0",
"prettier": "3.9.5",
"typescript": "~6.0.0",
"unplugin-auto-import": "^21.1.0",
"unplugin-vue-components": "^32.1.0",
"vite": "^8.1.5",
"vite-plugin-vue-devtools": "^8.1.5",
"vitest": "^4.1.10",
"vue-eslint-parser": "^10.4.1",
"vue-tsc": "^3.3.7"
},
"engines": {
"node": "^22.18.0 || >=24.12.0"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

+34
View File
@@ -0,0 +1,34 @@
<script setup lang="ts">
// 根组件:全局 provider(message / dialog / notification)+ 路由出口
import { RouterView } from 'vue-router'
</script>
<template>
<n-message-provider>
<n-dialog-provider>
<n-notification-provider>
<RouterView />
</n-notification-provider>
</n-dialog-provider>
</n-message-provider>
</template>
<style>
/* 全局基础样式(浅色单主题,交互设计 §2 #2) */
html,
body,
#app {
height: 100%;
margin: 0;
}
body {
font-family:
system-ui,
-apple-system,
'Segoe UI',
'PingFang SC',
'Microsoft YaHei',
sans-serif;
}
</style>
+21
View File
@@ -0,0 +1,21 @@
import { describe, expect, it } from 'vitest'
import router from '@/router'
describe('router', () => {
it('路由表包含查看面与管理面三页', () => {
const paths = router.getRoutes().map((r) => r.path)
for (const p of ['/usage-log', '/manage/api-keys', '/manage/purchases', '/manage/qpu']) {
expect(paths).toContain(p)
}
})
it(
'根路径重定向到 /usage-log(真实导航;首次含懒加载组件转换,放宽超时)',
async () => {
await router.push('/')
expect(router.currentRoute.value.path).toBe('/usage-log')
},
20_000,
)
})
+101
View File
@@ -0,0 +1,101 @@
/**
* API 客户端(契约 约定 20 / 24):
* - 成功 = 裸数据体;失败 = `{ error: { code, message } }`(非 2xx)
* - 管理面请求自动附加 `X-Manage-Token`(存 sessionStorage,关标签即忘)
* - 401 `manage_unauthorized` → 通知口令门帘(ManageLayout 监听)
*/
import { MANAGE_TOKEN_HEADER, type ApiErrorBody } from '@naku/shared'
export class ApiError extends Error {
constructor(
readonly code: string,
readonly status: number,
message: string,
) {
super(message)
this.name = 'ApiError'
}
}
const MANAGE_TOKEN_KEY = 'naku:manage-token'
export function getManageToken(): string {
return sessionStorage.getItem(MANAGE_TOKEN_KEY) ?? ''
}
export function setManageToken(token: string): void {
sessionStorage.setItem(MANAGE_TOKEN_KEY, token)
}
export function clearManageToken(): void {
sessionStorage.removeItem(MANAGE_TOKEN_KEY)
}
/** 口令失效通知(订阅返回取消函数) */
const unauthorizedListeners = new Set<() => void>()
export function onManageUnauthorized(fn: () => void): () => void {
unauthorizedListeners.add(fn)
return () => {
unauthorizedListeners.delete(fn)
}
}
interface RequestOptions {
method?: 'GET' | 'POST' | 'PATCH' | 'DELETE'
body?: unknown
/** 管理面请求:附加 X-Manage-Token */
manage?: boolean
}
export async function request<T>(path: string, options: RequestOptions = {}): Promise<T> {
const { method = 'GET', body, manage = false } = options
const headers: Record<string, string> = {}
if (body !== undefined) headers['content-type'] = 'application/json'
if (manage) headers[MANAGE_TOKEN_HEADER] = getManageToken()
const res = await fetch(path, {
method,
headers,
body: body === undefined ? undefined : JSON.stringify(body),
})
if (!res.ok) {
// 失败体未必是我们的 JSON(反代 502 / 网关错误页)——兜底解析
const parsed = (await res.json().catch(() => null)) as ApiErrorBody | null
const code = parsed?.error?.code ?? 'unknown'
const message = parsed?.error?.message ?? `HTTP ${res.status}`
if (manage && res.status === 401 && code === 'manage_unauthorized') {
unauthorizedListeners.forEach((fn) => fn())
}
throw new ApiError(code, res.status, message)
}
return (await res.json()) as T
}
// ---- 查看面(无会话;key 集合随请求体,契约 约定 5 / 19) ----
export const api = {
usageLogsQuery: <T>(body: unknown) => request<T>('/api/usage/logs/query', { method: 'POST', body }),
usageSummary: <T>(body: unknown) => request<T>('/api/usage/summary', { method: 'POST', body }),
// ---- 管理面(manage: true 自动带口令) ----
apiKeysList: <T>() => request<T>('/api/manage/api-keys', { manage: true }),
apiKeyRegister: <T>(body: unknown) =>
request<T>('/api/manage/api-keys', { method: 'POST', body, manage: true }),
apiKeyPatch: <T>(id: number, body: unknown) =>
request<T>(`/api/manage/api-keys/${id}`, { method: 'PATCH', body, manage: true }),
purchasesList: <T>() => request<T>('/api/manage/purchases', { manage: true }),
purchasesCreate: <T>(body: unknown) =>
request<T>('/api/manage/purchases', { method: 'POST', body, manage: true }),
purchasesPatch: <T>(id: number, body: unknown) =>
request<T>(`/api/manage/purchases/${id}`, { method: 'PATCH', body, manage: true }),
purchasesDelete: <T>(id: number) =>
request<T>(`/api/manage/purchases/${id}`, { method: 'DELETE', manage: true }),
purchasesObservations: <T>() => request<T>('/api/manage/purchases/observations', { manage: true }),
qpuList: <T>() => request<T>('/api/manage/qpu', { manage: true }),
}
+15
View File
@@ -0,0 +1,15 @@
/* eslint-disable */
/* prettier-ignore */
/* oxlint-disable */
/* oxfmt-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
// biome-ignore lint: disable
export {}
declare global {
const useDialog: typeof import('naive-ui').useDialog
const useLoadingBar: typeof import('naive-ui').useLoadingBar
const useMessage: typeof import('naive-ui').useMessage
const useNotification: typeof import('naive-ui').useNotification
}
+30
View File
@@ -0,0 +1,30 @@
/* eslint-disable */
// @ts-nocheck
// biome-ignore lint: disable
// oxlint-disable
// ------
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard']
NDialogProvider: typeof import('naive-ui')['NDialogProvider']
NEmpty: typeof import('naive-ui')['NEmpty']
NInput: typeof import('naive-ui')['NInput']
NLayout: typeof import('naive-ui')['NLayout']
NLayoutContent: typeof import('naive-ui')['NLayoutContent']
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
NMenu: typeof import('naive-ui')['NMenu']
NMessageProvider: typeof import('naive-ui')['NMessageProvider']
NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
NSpace: typeof import('naive-ui')['NSpace']
NText: typeof import('naive-ui')['NText']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
}
+9
View File
@@ -0,0 +1,9 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
+42
View File
@@ -0,0 +1,42 @@
import { createRouter, createWebHistory } from 'vue-router'
/**
* 路由(交互设计 §0.1 / §1):
* - 无前缀 = 查看面(一期仅 `/usage-log`,`/` 重定向到它;二期候选 `/dashboard`)
* - `/manage` 前缀 = 管理面(口令门帘由 ManageLayout 承担;入口在查看面不暴露)
*/
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{ path: '/', redirect: '/usage-log' },
{
path: '/usage-log',
name: 'usage-log',
component: () => import('@/views/UsageLogView.vue'),
},
{
path: '/manage',
component: () => import('@/views/manage/ManageLayout.vue'),
children: [
{ path: '', redirect: '/manage/api-keys' },
{
path: 'api-keys',
name: 'manage-api-keys',
component: () => import('@/views/manage/ApiKeysView.vue'),
},
{
path: 'purchases',
name: 'manage-purchases',
component: () => import('@/views/manage/PurchasesView.vue'),
},
{
path: 'qpu',
name: 'manage-qpu',
component: () => import('@/views/manage/QpuView.vue'),
},
],
},
],
})
export default router
+20
View File
@@ -0,0 +1,20 @@
<script setup lang="ts">
// 用量日志页(交互设计 §3.1)——骨架占位:
// 筛选区(key 标签输入 + datetimerange + 查询)→ 卡片区(次数 / 用量 / 消费)→ 未收录提示 → 明细表格 + 分页器
// 数据形状见 docs/design/API契约.md §2.1
</script>
<template>
<div class="usage-log">
<h1>用量日志</h1>
<n-empty description="骨架占位——页面结构见 docs/design/交互设计.md §3.1" />
</div>
</template>
<style scoped>
.usage-log {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}
</style>
+13
View File
@@ -0,0 +1,13 @@
<script setup lang="ts">
// key 管理页(交互设计 §3.2)——骨架占位:
// 清单 8 列(key 名 / 状态徽章 / 已用 / 剩余 / 到期 / 登记时间 / 数据截止 / 操作)
// 登记:页头「+ 登记 key」→ n-modal;启停:行内按钮(停用弹确认、启用直接执行)
// 数据形状见 docs/design/API契约.md §2.2
</script>
<template>
<div class="api-keys">
<h2>key 管理</h2>
<n-empty description="骨架占位——页面结构见 docs/design/交互设计.md §3.2" />
</div>
</template>
+140
View File
@@ -0,0 +1,140 @@
<script setup lang="ts">
/**
* 管理面布局(交互设计 §2 #7 + 口令门帘细节):
* - 未验证:全屏居中卡片(口令 + 「进入」)——校验直接用管理面请求,401 即口令错
* - 已验证:侧边栏菜单(三页)+ 内容区;底部「← 查看面」
* - 口令存 sessionStorage(关标签即忘);401 时自动退回门帘
*/
import { onMounted, onUnmounted, ref } from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'
import {
ApiError,
api,
clearManageToken,
getManageToken,
onManageUnauthorized,
setManageToken,
} from '@/api/client'
const router = useRouter()
const route = useRoute()
const unlocked = ref(false)
const checking = ref(false)
const tokenInput = ref('')
const errorText = ref('')
async function verifyAndUnlock(): Promise<void> {
checking.value = true
errorText.value = ''
try {
await api.apiKeysList()
unlocked.value = true
} catch (err) {
clearManageToken()
errorText.value =
err instanceof ApiError && err.code === 'manage_unauthorized'
? '口令不正确'
: '校验失败,请稍后重试'
unlocked.value = false
} finally {
checking.value = false
}
}
async function tryUnlock(): Promise<void> {
if (!tokenInput.value) {
errorText.value = '请输入口令'
return
}
setManageToken(tokenInput.value)
await verifyAndUnlock()
}
let off: (() => void) | null = null
onMounted(() => {
off = onManageUnauthorized(() => {
unlocked.value = false
errorText.value = '口令已失效,请重新输入'
})
if (getManageToken()) {
void verifyAndUnlock()
}
})
onUnmounted(() => {
off?.()
})
const menuOptions = [
{ label: 'key 管理', key: 'manage-api-keys' },
{ label: '购买记录', key: 'manage-purchases' },
{ label: '换算参数', key: 'manage-qpu' },
]
</script>
<template>
<div v-if="!unlocked" class="gate">
<n-card class="gate-card" title="管理通道">
<n-space vertical :size="16">
<n-input
v-model:value="tokenInput"
type="password"
show-password-on="click"
placeholder="部署口令"
@keyup.enter="tryUnlock"
/>
<n-text v-if="errorText" type="error">{{ errorText }}</n-text>
<n-button type="primary" block :loading="checking" @click="tryUnlock">进入</n-button>
</n-space>
</n-card>
</div>
<n-layout v-else has-sider class="manage">
<n-layout-sider bordered :width="200">
<div class="sider">
<n-menu
:value="String(route.name ?? '')"
:options="menuOptions"
@update:value="(key: string) => router.push({ name: key })"
/>
<n-button text class="back" @click="router.push('/usage-log')">← 查看面</n-button>
</div>
</n-layout-sider>
<n-layout-content class="content">
<RouterView />
</n-layout-content>
</n-layout>
</template>
<style scoped>
.gate {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.gate-card {
width: 360px;
}
.manage {
height: 100vh;
}
.sider {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 16px 0;
}
.back {
margin-left: 24px;
align-self: flex-start;
}
.content {
padding: 24px;
overflow: auto;
}
</style>
@@ -0,0 +1,12 @@
<script setup lang="ts">
// 购买记录页(交互设计 §3.3)——骨架占位:
// 清单 8 列 + 核对提示(未登记观测提示条 + 折叠区 + 补录)+ 登记/编辑用右侧 n-drawer
// 数据形状见 docs/design/API契约.md §2.3
</script>
<template>
<div class="purchases">
<h2>购买记录</h2>
<n-empty description="骨架占位——页面结构见 docs/design/交互设计.md §3.3" />
</div>
</template>
+12
View File
@@ -0,0 +1,12 @@
<script setup lang="ts">
// 换算参数时间线页(交互设计 §3.3)——骨架占位:
// 表格两列(生效时间 / QPU 值)+「当前生效」标记 + 页首说明文案;纯只读
// 数据形状见 docs/design/API契约.md §2.4
</script>
<template>
<div class="qpu">
<h2>换算参数时间线</h2>
<n-empty description="骨架占位——页面结构见 docs/design/交互设计.md §3.3" />
</div>
</template>
+18
View File
@@ -0,0 +1,18 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
// Extra safety for array and object lookups, but may have false positives.
"noUncheckedIndexedAccess": true,
// Path mapping for cleaner imports.
"paths": {
"@/*": ["./src/*"]
},
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
// Specified here to keep it out of the root directory.
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
}
}
+14
View File
@@ -0,0 +1,14 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}
+27
View File
@@ -0,0 +1,27 @@
// TSConfig for modules that run in Node.js environment via either transpilation or type-stripping.
{
"extends": "@tsconfig/node24/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"playwright.config.*",
"eslint.config.*"
],
"compilerOptions": {
// Most tools use transpilation instead of Node.js's native type-stripping.
// Bundler mode provides a smoother developer experience.
"module": "preserve",
"moduleResolution": "bundler",
// Include Node.js types and avoid accidentally including other `@types/*` packages.
"types": ["node"],
// Disable emitting output during `vue-tsc --build`, which is used for type-checking only.
"noEmit": true,
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
// Specified here to keep it out of the root directory.
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
}
}
+19
View File
@@ -0,0 +1,19 @@
{
"extends": "./tsconfig.app.json",
// Override to include only test files and clear exclusions.
// Application code imported in tests is automatically included via module resolution.
"include": ["src/**/__tests__/*", "env.d.ts"],
"exclude": [],
"compilerOptions": {
// Vitest runs in a different environment than the application code.
// Adjust lib and types accordingly.
"lib": [],
"types": ["node", "jsdom"],
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
// Specified here to keep it out of the root directory.
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo"
}
}
+43
View File
@@ -0,0 +1,43 @@
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
// naive-ui 按需引入(交互设计 §2 #3)
AutoImport({
imports: [
{
'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
},
],
dts: 'src/auto-imports.d.ts',
}),
Components({
resolvers: [NaiveUiResolver()],
dts: 'src/components.d.ts',
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
server: {
proxy: {
// 开发期把 /api 代理到后端;生产由同域反代承担(见 README 工程注记)
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
},
},
},
})
+14
View File
@@ -0,0 +1,14 @@
import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(
viteConfig,
defineConfig({
test: {
environment: 'jsdom',
exclude: [...configDefaults.exclude, 'e2e/**'],
root: fileURLToPath(new URL('./', import.meta.url)),
},
}),
)