This commit is contained in:
2026-01-21 15:00:11 +08:00
parent fd20ca2c52
commit 011c9211f5
62 changed files with 2 additions and 2 deletions

289
apps/server/build.ts Normal file
View File

@@ -0,0 +1,289 @@
import { Schema } from '@effect/schema'
import { $ } from 'bun'
import { Console, Context, Data, Effect, Layer } from 'effect'
// ============================================================================
// Domain Models & Schema
// ============================================================================
const targetMap = {
'bun-windows-x64': 'x86_64-pc-windows-msvc',
'bun-darwin-arm64': 'aarch64-apple-darwin',
'bun-darwin-x64': 'x86_64-apple-darwin',
'bun-linux-x64': 'x86_64-unknown-linux-gnu',
'bun-linux-arm64': 'aarch64-unknown-linux-gnu',
} as const
const BunTargetSchema = Schema.Literal(
'bun-windows-x64',
'bun-darwin-arm64',
'bun-darwin-x64',
'bun-linux-x64',
'bun-linux-arm64',
)
type BunTarget = Schema.Schema.Type<typeof BunTargetSchema>
const BuildConfigSchema = Schema.Struct({
entrypoint: Schema.String.pipe(Schema.nonEmptyString()),
outputDir: Schema.String.pipe(Schema.nonEmptyString()),
targets: Schema.Array(BunTargetSchema).pipe(Schema.minItems(1)),
})
type BuildConfig = Schema.Schema.Type<typeof BuildConfigSchema>
const BuildResultSchema = Schema.Struct({
target: BunTargetSchema,
outputs: Schema.Array(Schema.String),
})
type BuildResult = Schema.Schema.Type<typeof BuildResultSchema>
// ============================================================================
// Error Models (使用 Data.TaggedError)
// ============================================================================
class CleanError extends Data.TaggedError('CleanError')<{
readonly dir: string
readonly cause: unknown
}> {}
class BuildError extends Data.TaggedError('BuildError')<{
readonly target: BunTarget
readonly cause: unknown
}> {}
class ConfigError extends Data.TaggedError('ConfigError')<{
readonly message: string
readonly cause: unknown
}> {}
// ============================================================================
// Services
// ============================================================================
/**
* 配置服务
*/
class BuildConfigService extends Context.Tag('BuildConfigService')<
BuildConfigService,
BuildConfig
>() {
/**
* 从原始数据创建并验证配置
*/
static fromRaw = (raw: unknown) =>
Effect.gen(function* () {
const decoded = yield* Schema.decodeUnknown(BuildConfigSchema)(raw)
return decoded
}).pipe(
Effect.catchAll((error) =>
Effect.fail(
new ConfigError({
message: '配置验证失败',
cause: error,
}),
),
),
)
/**
* 默认配置 Layer
*/
static readonly Live = Layer.effect(
BuildConfigService,
BuildConfigService.fromRaw({
entrypoint: '.output/server/index.mjs',
// outputDir: 'out',
outputDir: 'src-tauri/binaries',
targets: ['bun-windows-x64', 'bun-darwin-arm64', 'bun-linux-x64'],
}),
)
}
/**
* 文件系统服务
*/
class FileSystemService extends Context.Tag('FileSystemService')<
FileSystemService,
{
readonly cleanDir: (dir: string) => Effect.Effect<void, CleanError>
}
>() {
static readonly Live = Layer.succeed(FileSystemService, {
cleanDir: (dir: string) =>
Effect.tryPromise({
try: async () => {
await $`rm -rf ${dir}`
},
catch: (cause: unknown) =>
new CleanError({
dir,
cause,
}),
}),
})
}
/**
* 构建服务
*/
class BuildService extends Context.Tag('BuildService')<
BuildService,
{
readonly buildForTarget: (
config: BuildConfig,
target: BunTarget,
) => Effect.Effect<BuildResult, BuildError>
readonly buildAll: (
config: BuildConfig,
) => Effect.Effect<ReadonlyArray<BuildResult>, BuildError>
}
>() {
static readonly Live = Layer.succeed(BuildService, {
buildForTarget: (config: BuildConfig, target: BunTarget) =>
Effect.gen(function* () {
yield* Console.log(`🔨 开始构建: ${target}`)
const output = yield* Effect.tryPromise({
try: () =>
Bun.build({
entrypoints: [config.entrypoint],
compile: {
outfile: `app-${targetMap[target]}`,
target: target,
},
outdir: config.outputDir,
}),
catch: (cause: unknown) =>
new BuildError({
target,
cause,
}),
})
const paths = output.outputs.map((item: { path: string }) => item.path)
return {
target,
outputs: paths,
} satisfies BuildResult
}),
buildAll: (config: BuildConfig) =>
Effect.gen(function* () {
const effects = config.targets.map((target) =>
Effect.gen(function* () {
yield* Console.log(`🔨 开始构建: ${target}`)
const output = yield* Effect.tryPromise({
try: () =>
Bun.build({
entrypoints: [config.entrypoint],
compile: {
outfile: `app-${targetMap[target]}`,
target: target,
},
outdir: config.outputDir,
}),
catch: (cause: unknown) =>
new BuildError({
target,
cause,
}),
})
const paths = output.outputs.map(
(item: { path: string }) => item.path,
)
return {
target,
outputs: paths,
} satisfies BuildResult
}),
)
return yield* Effect.all(effects, { concurrency: 'unbounded' })
}),
})
}
/**
* 报告服务
*/
class ReporterService extends Context.Tag('ReporterService')<
ReporterService,
{
readonly printSummary: (
results: ReadonlyArray<BuildResult>,
) => Effect.Effect<void>
}
>() {
static readonly Live = Layer.succeed(ReporterService, {
printSummary: (results: ReadonlyArray<BuildResult>) =>
Effect.gen(function* () {
yield* Console.log('\n📦 构建完成:')
for (const result of results) {
yield* Console.log(` ${result.target}:`)
for (const path of result.outputs) {
yield* Console.log(` - ${path}`)
}
}
}),
})
}
// ============================================================================
// Main Program
// ============================================================================
const program = Effect.gen(function* () {
const config = yield* BuildConfigService
const fs = yield* FileSystemService
const builder = yield* BuildService
const reporter = yield* ReporterService
// 1. 清理输出目录
yield* fs.cleanDir(config.outputDir)
yield* Console.log(`✓ 已清理输出目录: ${config.outputDir}`)
// 2. 并行构建所有目标
const results = yield* builder.buildAll(config)
// 3. 输出构建摘要
yield* reporter.printSummary(results)
return results
})
// ============================================================================
// Layer Composition
// ============================================================================
const MainLayer = Layer.mergeAll(
BuildConfigService.Live,
FileSystemService.Live,
BuildService.Live,
ReporterService.Live,
)
// ============================================================================
// Runner
// ============================================================================
const runnable = program.pipe(
Effect.provide(MainLayer),
Effect.catchTags({
CleanError: (error) =>
Console.error(`❌ 清理目录失败: ${error.dir}`, error.cause),
BuildError: (error) =>
Console.error(`❌ 构建失败 [${error.target}]:`, error.cause),
ConfigError: (error) =>
Console.error(`❌ 配置错误: ${error.message}`, error.cause),
}),
Effect.tapErrorCause((cause) => Console.error('❌ 未预期的错误:', cause)),
)
Effect.runPromise(runnable).catch(() => {
process.exit(1)
})

View File

@@ -0,0 +1,11 @@
import { defineConfig } from 'drizzle-kit'
import { env } from '@/env'
export default defineConfig({
out: './drizzle',
schema: './src/db/schema/index.ts',
dialect: 'postgresql',
dbCredentials: {
url: env.DATABASE_URL,
},
})

57
apps/server/package.json Normal file
View File

@@ -0,0 +1,57 @@
{
"name": "@furtherverse/server",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"compile": "bun build.ts",
"build": "vite build",
"db:generate": "drizzle-kit generate",
"db:migrate": "drizzle-kit migrate",
"db:push": "drizzle-kit push",
"db:studio": "drizzle-kit studio",
"dev": "vite dev",
"fix": "biome check --write",
"typecheck": "tsc -b"
},
"dependencies": {
"@orpc/client": "catalog:",
"@orpc/contract": "catalog:",
"@orpc/server": "catalog:",
"@orpc/tanstack-query": "catalog:",
"@orpc/zod": "catalog:",
"@t3-oss/env-core": "catalog:",
"@tanstack/react-query": "catalog:",
"@tanstack/react-router": "catalog:",
"@tanstack/react-router-ssr-query": "catalog:",
"@tanstack/react-start": "catalog:",
"@tauri-apps/api": "catalog:",
"drizzle-orm": "catalog:",
"drizzle-zod": "catalog:",
"postgres": "catalog:",
"react": "catalog:",
"react-dom": "catalog:",
"zod": "catalog:"
},
"devDependencies": {
"@biomejs/biome": "catalog:",
"@effect/platform": "catalog:",
"@effect/schema": "catalog:",
"@tailwindcss/vite": "catalog:",
"@tanstack/devtools-vite": "catalog:",
"@tanstack/react-devtools": "catalog:",
"@tanstack/react-query-devtools": "catalog:",
"@tanstack/react-router-devtools": "catalog:",
"@types/bun": "catalog:",
"@vitejs/plugin-react": "catalog:",
"babel-plugin-react-compiler": "catalog:",
"drizzle-kit": "catalog:",
"effect": "catalog:",
"nitro": "catalog:",
"tailwindcss": "catalog:",
"turbo": "catalog:",
"typescript": "catalog:",
"vite": "catalog:",
"vite-tsconfig-paths": "catalog:"
}
}

View File

@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

View File

@@ -0,0 +1,3 @@
export function ErrorComponent() {
return <div>An unhandled error happened!</div>
}

View File

@@ -0,0 +1,3 @@
export function NotFoundComponent() {
return <div>404 - Not Found</div>
}

View File

@@ -0,0 +1,13 @@
import { drizzle } from 'drizzle-orm/postgres-js'
import * as schema from '@/db/schema'
import { env } from '@/env'
export function createDb() {
return drizzle({
connection: {
url: env.DATABASE_URL,
prepare: true,
},
schema,
})
}

View File

@@ -0,0 +1 @@
export * from './todo'

View File

@@ -0,0 +1,15 @@
import { sql } from 'drizzle-orm'
import { boolean, pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core'
export const todoTable = pgTable('todo', {
id: uuid('id').primaryKey().default(sql`uuidv7()`),
title: text('title').notNull(),
completed: boolean('completed').notNull().default(false),
createdAt: timestamp('created_at', { withTimezone: true })
.notNull()
.defaultNow(),
updatedAt: timestamp('updated_at', { withTimezone: true })
.notNull()
.defaultNow()
.$onUpdateFn(() => new Date()),
})

14
apps/server/src/env.ts Normal file
View File

@@ -0,0 +1,14 @@
import { createEnv } from '@t3-oss/env-core'
import { z } from 'zod'
export const env = createEnv({
server: {
DATABASE_URL: z.url(),
},
clientPrefix: 'VITE_',
client: {
VITE_APP_TITLE: z.string().min(1).optional(),
},
runtimeEnv: process.env,
emptyStringAsUndefined: true,
})

View File

@@ -0,0 +1,7 @@
import type { TanStackDevtoolsReactPlugin } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
export const devtools = {
name: 'TanStack Query',
render: <ReactQueryDevtoolsPanel />,
} satisfies TanStackDevtoolsReactPlugin

View File

@@ -0,0 +1 @@
export * from './devtools'

View File

@@ -0,0 +1,7 @@
import type { TanStackDevtoolsReactPlugin } from '@tanstack/react-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
export const devtools = {
name: 'TanStack Router',
render: <TanStackRouterDevtoolsPanel />,
} satisfies TanStackDevtoolsReactPlugin

View File

@@ -0,0 +1 @@
export * from './devtools'

View File

View File

@@ -0,0 +1,53 @@
import { createORPCClient } from '@orpc/client'
import { RPCLink } from '@orpc/client/fetch'
import { createRouterClient } from '@orpc/server'
import { createTanstackQueryUtils } from '@orpc/tanstack-query'
import { createIsomorphicFn } from '@tanstack/react-start'
import { getRequestHeaders } from '@tanstack/react-start/server'
import { router } from './router'
import type { RouterClient } from './types'
const getORPCClient = createIsomorphicFn()
.server(() =>
createRouterClient(router, {
context: () => ({
headers: getRequestHeaders(),
}),
}),
)
.client(() => {
const link = new RPCLink({
url: `${window.location.origin}/api/rpc`,
})
return createORPCClient<RouterClient>(link)
})
const client: RouterClient = getORPCClient()
export const orpc = createTanstackQueryUtils(client, {
experimental_defaults: {
todo: {
create: {
mutationOptions: {
onSuccess: (_, __, ___, ctx) => {
ctx.client.invalidateQueries({ queryKey: orpc.todo.list.key() })
},
},
},
update: {
mutationOptions: {
onSuccess: (_, __, ___, ctx) => {
ctx.client.invalidateQueries({ queryKey: orpc.todo.list.key() })
},
},
},
remove: {
mutationOptions: {
onSuccess: (_, __, ___, ctx) => {
ctx.client.invalidateQueries({ queryKey: orpc.todo.list.key() })
},
},
},
},
},
})

View File

@@ -0,0 +1,5 @@
import * as todo from './contracts/todo'
export const contract = {
todo,
}

View File

@@ -0,0 +1,43 @@
import { oc } from '@orpc/contract'
import {
createInsertSchema,
createSelectSchema,
createUpdateSchema,
} from 'drizzle-zod'
import { z } from 'zod'
import { todoTable } from '@/db/schema'
const selectSchema = createSelectSchema(todoTable)
const insertSchema = createInsertSchema(todoTable).omit({
id: true,
createdAt: true,
updatedAt: true,
})
const updateSchema = createUpdateSchema(todoTable).omit({
id: true,
createdAt: true,
updatedAt: true,
})
export const list = oc.input(z.void()).output(z.array(selectSchema))
export const create = oc.input(insertSchema).output(selectSchema)
export const update = oc
.input(
z.object({
id: z.uuid(),
data: updateSchema,
}),
)
.output(selectSchema)
export const remove = oc
.input(
z.object({
id: z.uuid(),
}),
)
.output(z.void())

View File

@@ -0,0 +1,51 @@
import { ORPCError } from '@orpc/server'
import { eq } from 'drizzle-orm'
import { todoTable } from '@/db/schema'
import { dbProvider } from '@/orpc/middlewares'
import { os } from '@/orpc/server'
export const list = os.todo.list
.use(dbProvider)
.handler(async ({ context }) => {
const todos = await context.db.query.todoTable.findMany({
orderBy: (todos, { desc }) => [desc(todos.createdAt)],
})
return todos
})
export const create = os.todo.create
.use(dbProvider)
.handler(async ({ context, input }) => {
const [newTodo] = await context.db
.insert(todoTable)
.values(input)
.returning()
if (!newTodo) {
throw new ORPCError('NOT_FOUND')
}
return newTodo
})
export const update = os.todo.update
.use(dbProvider)
.handler(async ({ context, input }) => {
const [updatedTodo] = await context.db
.update(todoTable)
.set(input.data)
.where(eq(todoTable.id, input.id))
.returning()
if (!updatedTodo) {
throw new ORPCError('NOT_FOUND')
}
return updatedTodo
})
export const remove = os.todo.remove
.use(dbProvider)
.handler(async ({ context, input }) => {
await context.db.delete(todoTable).where(eq(todoTable.id, input.id))
})

View File

@@ -0,0 +1,2 @@
export { orpc } from './client'
export * from './types'

View File

@@ -0,0 +1,29 @@
import { os } from '@orpc/server'
import { createDb } from '@/db'
const IS_SERVERLESS = false // TODO: 这里需要优化
let globalDb: ReturnType<typeof createDb> | null = null
function getDb() {
if (IS_SERVERLESS) {
return createDb()
}
if (!globalDb) {
globalDb = createDb()
}
return globalDb
}
export const dbProvider = os.middleware(async ({ context, next }) => {
const db = getDb()
return next({
context: {
...context,
db,
},
})
})

View File

@@ -0,0 +1 @@
export * from './db'

View File

@@ -0,0 +1,6 @@
import * as todo from './handlers/todo'
import { os } from './server'
export const router = os.router({
todo,
})

View File

@@ -0,0 +1,7 @@
import { implement } from '@orpc/server'
import { contract } from './contract'
// biome-ignore lint/complexity/noBannedTypes: 暂无 context
export type ORPCContext = {}
export const os = implement(contract).$context<ORPCContext>()

View File

@@ -0,0 +1,11 @@
import type {
ContractRouterClient,
InferContractRouterInputs,
InferContractRouterOutputs,
} from '@orpc/contract'
import type { contract } from './contract'
export type Contract = typeof contract
export type RouterClient = ContractRouterClient<Contract>
export type RouterInputs = InferContractRouterInputs<Contract>
export type RouterOutputs = InferContractRouterOutputs<Contract>

View File

@@ -0,0 +1,86 @@
/* eslint-disable */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// This file was automatically generated by TanStack Router.
// You should NOT make any changes in this file as it will be overwritten.
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
import { Route as rootRouteImport } from './routes/__root'
import { Route as IndexRouteImport } from './routes/index'
import { Route as ApiRpcSplatRouteImport } from './routes/api/rpc.$'
const IndexRoute = IndexRouteImport.update({
id: '/',
path: '/',
getParentRoute: () => rootRouteImport,
} as any)
const ApiRpcSplatRoute = ApiRpcSplatRouteImport.update({
id: '/api/rpc/$',
path: '/api/rpc/$',
getParentRoute: () => rootRouteImport,
} as any)
export interface FileRoutesByFullPath {
'/': typeof IndexRoute
'/api/rpc/$': typeof ApiRpcSplatRoute
}
export interface FileRoutesByTo {
'/': typeof IndexRoute
'/api/rpc/$': typeof ApiRpcSplatRoute
}
export interface FileRoutesById {
__root__: typeof rootRouteImport
'/': typeof IndexRoute
'/api/rpc/$': typeof ApiRpcSplatRoute
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath
fullPaths: '/' | '/api/rpc/$'
fileRoutesByTo: FileRoutesByTo
to: '/' | '/api/rpc/$'
id: '__root__' | '/' | '/api/rpc/$'
fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
IndexRoute: typeof IndexRoute
ApiRpcSplatRoute: typeof ApiRpcSplatRoute
}
declare module '@tanstack/react-router' {
interface FileRoutesByPath {
'/': {
id: '/'
path: '/'
fullPath: '/'
preLoaderRoute: typeof IndexRouteImport
parentRoute: typeof rootRouteImport
}
'/api/rpc/$': {
id: '/api/rpc/$'
path: '/api/rpc/$'
fullPath: '/api/rpc/$'
preLoaderRoute: typeof ApiRpcSplatRouteImport
parentRoute: typeof rootRouteImport
}
}
}
const rootRouteChildren: RootRouteChildren = {
IndexRoute: IndexRoute,
ApiRpcSplatRoute: ApiRpcSplatRoute,
}
export const routeTree = rootRouteImport
._addFileChildren(rootRouteChildren)
._addFileTypes<FileRouteTypes>()
import type { getRouter } from './router.tsx'
import type { createStart } from '@tanstack/react-start'
declare module '@tanstack/react-start' {
interface Register {
ssr: true
router: Awaited<ReturnType<typeof getRouter>>
}
}

View File

@@ -0,0 +1,26 @@
import { QueryClient } from '@tanstack/react-query'
import { createRouter } from '@tanstack/react-router'
import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
import type { RouterContext } from './routes/__root'
import { routeTree } from './routeTree.gen'
export const getRouter = () => {
const queryClient = new QueryClient()
const router = createRouter({
routeTree,
context: {
queryClient,
} satisfies RouterContext,
scrollRestoration: true,
defaultPreloadStaleTime: 0,
})
setupRouterSsrQueryIntegration({
router,
queryClient,
})
return router
}

View File

@@ -0,0 +1,63 @@
import { TanStackDevtools } from '@tanstack/react-devtools'
import type { QueryClient } from '@tanstack/react-query'
import {
createRootRouteWithContext,
HeadContent,
Scripts,
} from '@tanstack/react-router'
import type { ReactNode } from 'react'
import { ErrorComponent } from '@/components/Error'
import { NotFoundComponent } from '@/components/NotFount'
import { devtools as queryDevtools } from '@/integrations/tanstack-query'
import { devtools as routerDevtools } from '@/integrations/tanstack-router'
import appCss from '@/styles.css?url'
export interface RouterContext {
queryClient: QueryClient
}
export const Route = createRootRouteWithContext<RouterContext>()({
head: () => ({
meta: [
{
charSet: 'utf-8',
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1',
},
{
title: 'Fullstack Starter',
},
],
links: [
{
rel: 'stylesheet',
href: appCss,
},
],
}),
shellComponent: RootDocument,
errorComponent: () => <ErrorComponent />,
notFoundComponent: () => <NotFoundComponent />,
})
function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
return (
<html lang="zh-Hans">
<head>
<HeadContent />
</head>
<body>
{children}
<TanStackDevtools
config={{
position: 'bottom-right',
}}
plugins={[routerDevtools, queryDevtools]}
/>
<Scripts />
</body>
</html>
)
}

View File

@@ -0,0 +1,59 @@
import { ORPCError, onError, ValidationError } from '@orpc/server'
import { RPCHandler } from '@orpc/server/fetch'
import { createFileRoute } from '@tanstack/react-router'
import { z } from 'zod'
import { router } from '@/orpc/router'
const handler = new RPCHandler(router, {
interceptors: [
onError((error) => {
console.error(error)
}),
],
clientInterceptors: [
onError((error) => {
if (
error instanceof ORPCError &&
error.code === 'BAD_REQUEST' &&
error.cause instanceof ValidationError
) {
// If you only use Zod you can safely cast to ZodIssue[]
const zodError = new z.ZodError(
error.cause.issues as z.core.$ZodIssue[],
)
throw new ORPCError('INPUT_VALIDATION_FAILED', {
status: 422,
message: z.prettifyError(zodError),
data: z.flattenError(zodError),
cause: error.cause,
})
}
if (
error instanceof ORPCError &&
error.code === 'INTERNAL_SERVER_ERROR' &&
error.cause instanceof ValidationError
) {
throw new ORPCError('OUTPUT_VALIDATION_FAILED', {
cause: error.cause,
})
}
}),
],
})
export const Route = createFileRoute('/api/rpc/$')({
server: {
handlers: {
ANY: async ({ request }) => {
const { response } = await handler.handle(request, {
prefix: '/api/rpc',
context: {},
})
return response ?? new Response('Not Found', { status: 404 })
},
},
},
})

View File

@@ -0,0 +1,215 @@
import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
import { createFileRoute } from '@tanstack/react-router'
import { isTauri } from '@tauri-apps/api/core'
import { getCurrentWindow } from '@tauri-apps/api/window'
import type { ChangeEventHandler, FormEventHandler } from 'react'
import { useEffect, useState } from 'react'
import { orpc } from '@/orpc'
export const Route = createFileRoute('/')({
component: Todos,
loader: async ({ context }) => {
await context.queryClient.ensureQueryData(orpc.todo.list.queryOptions())
},
})
function Todos() {
const [newTodoTitle, setNewTodoTitle] = useState('')
const listQuery = useSuspenseQuery(orpc.todo.list.queryOptions())
const createMutation = useMutation(orpc.todo.create.mutationOptions())
const updateMutation = useMutation(orpc.todo.update.mutationOptions())
const deleteMutation = useMutation(orpc.todo.remove.mutationOptions())
useEffect(() => {
if (!isTauri()) return
getCurrentWindow().setTitle('待办事项')
}, [])
const handleCreateTodo: FormEventHandler<HTMLFormElement> = (e) => {
e.preventDefault()
if (newTodoTitle.trim()) {
createMutation.mutate({ title: newTodoTitle.trim() })
setNewTodoTitle('')
}
}
const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
setNewTodoTitle(e.target.value)
}
const handleToggleTodo = (id: string, currentCompleted: boolean) => {
updateMutation.mutate({
id,
data: { completed: !currentCompleted },
})
}
const handleDeleteTodo = (id: string) => {
deleteMutation.mutate({ id })
}
const todos = listQuery.data
const completedCount = todos.filter((todo) => todo.completed).length
const totalCount = todos.length
const progress = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
return (
<div className="min-h-screen bg-slate-50 py-12 px-4 sm:px-6 font-sans">
<div className="max-w-2xl mx-auto space-y-8">
{/* Header */}
<div className="flex items-end justify-between">
<div>
<h1 className="text-3xl font-bold text-slate-900 tracking-tight">
</h1>
<p className="text-slate-500 mt-1"></p>
</div>
<div className="text-right">
<div className="text-2xl font-semibold text-slate-900">
{completedCount}
<span className="text-slate-400 text-lg">/{totalCount}</span>
</div>
<div className="text-xs font-medium text-slate-400 uppercase tracking-wider">
</div>
</div>
</div>
{/* Add Todo Form */}
<form onSubmit={handleCreateTodo} className="relative group z-10">
<div className="relative transform transition-all duration-200 focus-within:-translate-y-1">
<input
type="text"
value={newTodoTitle}
onChange={handleInputChange}
placeholder="添加新任务..."
className="w-full pl-6 pr-32 py-5 bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border-0 ring-1 ring-slate-100 focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all placeholder:text-slate-400 text-lg text-slate-700"
disabled={createMutation.isPending}
/>
<button
type="submit"
disabled={createMutation.isPending || !newTodoTitle.trim()}
className="absolute right-3 top-3 bottom-3 px-6 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-all shadow-md shadow-indigo-200 disabled:opacity-50 disabled:shadow-none hover:shadow-lg hover:shadow-indigo-300 active:scale-95"
>
{createMutation.isPending ? '添加中' : '添加'}
</button>
</div>
</form>
{/* Progress Bar (Only visible when there are tasks) */}
{totalCount > 0 && (
<div className="h-1.5 w-full bg-slate-200 rounded-full overflow-hidden">
<div
className="h-full bg-indigo-500 transition-all duration-500 ease-out rounded-full"
style={{ width: `${progress}%` }}
/>
</div>
)}
{/* Todo List */}
<div className="space-y-3">
{todos.length === 0 ? (
<div className="py-20 text-center">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-100 mb-4">
<svg
className="w-8 h-8 text-slate-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
</div>
<p className="text-slate-500 text-lg font-medium"></p>
<p className="text-slate-400 text-sm mt-1">
</p>
</div>
) : (
todos.map((todo) => (
<div
key={todo.id}
className={`group relative flex items-center p-4 bg-white rounded-xl border border-slate-100 shadow-sm transition-all duration-200 hover:shadow-md hover:border-slate-200 ${
todo.completed ? 'bg-slate-50/50' : ''
}`}
>
<button
type="button"
onClick={() => handleToggleTodo(todo.id, todo.completed)}
className={`flex-shrink-0 w-6 h-6 rounded-full border-2 transition-all duration-200 flex items-center justify-center mr-4 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${
todo.completed
? 'bg-indigo-500 border-indigo-500'
: 'border-slate-300 hover:border-indigo-500 bg-white'
}`}
>
{todo.completed && (
<svg
className="w-3.5 h-3.5 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={3}
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M5 13l4 4L19 7"
/>
</svg>
)}
</button>
<div className="flex-1 min-w-0">
<p
className={`text-lg transition-all duration-200 truncate ${
todo.completed
? 'text-slate-400 line-through decoration-slate-300 decoration-2'
: 'text-slate-700'
}`}
>
{todo.title}
</p>
</div>
<div className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute right-4 pl-4 bg-gradient-to-l from-white via-white to-transparent sm:static sm:bg-none">
<span className="text-xs text-slate-400 mr-3 hidden sm:inline-block">
{new Date(todo.createdAt).toLocaleDateString('zh-CN')}
</span>
<button
type="button"
onClick={() => handleDeleteTodo(todo.id)}
className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors focus:outline-none"
title="删除"
>
<svg
className="w-5 h-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button>
</div>
</div>
))
)}
</div>
</div>
</div>
)
}

View File

@@ -0,0 +1 @@
@import "tailwindcss";

View File

@@ -0,0 +1,9 @@
{
"extends": "@furtherverse/tsconfig/react.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

27
apps/server/turbo.json Normal file
View File

@@ -0,0 +1,27 @@
{
"$schema": "../../node_modules/turbo/schema.json",
"extends": ["//"],
"tasks": {
"build:compile": {
"dependsOn": ["build:vite"],
"outputs": ["out/**", "src-tauri/binaries/**"]
},
"build:tauri": {
"dependsOn": ["build:compile"],
"outputs": ["src-tauri/target/release/bundle/**"]
},
"build:vite": {
"outputs": [".output/**"]
},
"dev:tauri": {
"cache": false,
"dependsOn": ["build:compile"],
"persistent": true,
"with": ["dev:vite"]
},
"dev:vite": {
"cache": false,
"persistent": true
}
}
}

View File

@@ -0,0 +1,33 @@
import tailwindcss from '@tailwindcss/vite'
import { devtools as tanstackDevtools } from '@tanstack/devtools-vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import react from '@vitejs/plugin-react'
import { nitro } from 'nitro/vite'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
clearScreen: false,
plugins: [
tanstackDevtools(),
nitro({
preset: 'bun',
serveStatic: 'inline',
}),
tsconfigPaths(),
tailwindcss(),
tanstackStart(),
react({
babel: {
plugins: ['babel-plugin-react-compiler'],
},
}),
],
server: {
port: 3000,
strictPort: true,
watch: {
ignored: ['**/src-tauri/**'],
},
},
})