kevisual/code-center
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 删除studio-app-list模块，优化proxy.ts和flowme路由的结构与逻辑

Browse Source
This commit is contained in:
熊潇
2026-03-09 02:37:29 +08:00
parent 2b5d3250a4
commit e68b77f871
3 changed files with 96 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

354
src/modules/html/studio-app-list/index.ts
View File

@@ -1,354 +0,0 @@
type StudioOpts = {
user: string,
userAppKey?: string;
appIds: string[]
infoList?: {
user: string;
id: string;
status: 'waiting' | 'connected' | 'closed';
}[]
}
export const createStudioAppListHtml = (opts: StudioOpts) => {
const user = opts.user!;
const userAppKey = opts?.userAppKey;
let showUserAppKey = userAppKey;
const infos = opts.infoList || [];
if (showUserAppKey && showUserAppKey.startsWith(user + '--')) {
showUserAppKey = showUserAppKey.replace(user + '--', '');
}
const pathApps = opts?.appIds?.map(appId => {
const shortAppId = appId.replace(opts!.user + '--', '')
return {
appId,
shortAppId,
pathname: `/${user}/v1/${shortAppId}`
};
}) || []
// 应用列表内容
const appListContent = `
<div class="header">
<h1><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="12" x="2" y="6" rx="2"/><path d="M12 12h.01"/><path d="M17 12h.01"/><path d="M7 12h.01"/></svg> Studio 应用列表</h1>
<p class="user-info">用户: <strong>${user}</strong></p>
</div>
<div class="app-grid">
${pathApps.map((app, index) => `
<a href="${app.pathname}" class="app-card" style="animation-delay: ${index * 0.1}s">
<div class="app-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="M6 16h12"/><path d="M2 8h20"/></svg></div>
<div class="app-info">
<h3>${app.shortAppId}</h3>
<p class="app-path">${app.pathname}</p>
</div>
<div class="app-arrow">→</div>
</a>
`).join('')}
</div>
${pathApps.length === 0 ? `
<div class="empty-state">
<div class="empty-icon">📭</div>
<p>暂无应用</p>
</div>
` : ''}
`
return `
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Studio - ${user} 的应用</title>
<style>
:root {
--primary-color: #000000;
--primary-hover: #333333;
--text-color: #111111;
--text-secondary: #666666;
--bg-color: #ffffff;
--card-bg: #ffffff;
--border-color: #e0e0e0;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
--shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
* {
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 0;
min-height: 100vh;
line-height: 1.6;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 2rem;
}
/* Not Found Styles */
.not-found {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
padding: 3rem;
background-color: var(--card-bg);
border-radius: 16px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow);
}
.not-found-icon {
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
color: var(--text-secondary);
}
.not-found h1 {
font-size: 2.5rem;
color: #000000;
margin-bottom: 1rem;
}
.not-found p {
color: var(--text-secondary);
margin-bottom: 0.5rem;
max-width: 400px;
}
.not-found code {
background-color: #f5f5f5;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-family: 'Fira Code', 'Monaco', monospace;
color: #000000;
border: 1px solid var(--border-color);
}
.back-link {
display: inline-block;
margin-top: 1.5rem;
padding: 0.75rem 1.5rem;
background-color: var(--primary-color);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: all 0.2s;
}
.back-link:hover {
background-color: var(--primary-hover);
transform: translateY(-2px);
}
/* App List Styles */
.header {
text-align: center;
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-color);
}
.header h1 {
font-size: 2rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 0.5rem 0;
}
.user-info {
color: var(--text-secondary);
margin: 0;
}
.user-info strong {
color: var(--primary-color);
}
.app-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.app-card {
display: flex;
align-items: center;
padding: 1.25rem 1.5rem;
background-color: var(--card-bg);
border-radius: 12px;
text-decoration: none;
color: inherit;
border: 1px solid var(--border-color);
box-shadow: var(--shadow);
transition: all 0.3s ease;
animation: slideIn 0.5s ease-out backwards;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.app-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
border-color: var(--primary-color);
}
.app-icon {
font-size: 2rem;
margin-right: 1rem;
flex-shrink: 0;
}
.app-info {
flex: 1;
min-width: 0;
}
.app-info h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-color);
}
.app-path {
margin: 0.25rem 0 0 0;
font-size: 0.85rem;
color: var(--text-secondary);
font-family: 'Fira Code', 'Monaco', monospace;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-arrow {
font-size: 1.25rem;
color: var(--text-secondary);
transition: all 0.3s ease;
flex-shrink: 0;
}
.app-card:hover .app-arrow {
color: var(--primary-color);
transform: translateX(5px);
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
color: var(--text-secondary);
}
.empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}
.empty-state p {
font-size: 1.1rem;
margin: 0;
}
/* Footer */
.footer {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border-color);
text-align: center;
font-size: 0.85rem;
color: var(--text-secondary);
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #ffffff;
--primary-hover: #cccccc;
--text-color: #ffffff;
--text-secondary: #999999;
--bg-color: #000000;
--card-bg: #1a1a1a;
--border-color: #333333;
}
.not-found code {
background-color: #333333;
}
}
/* Responsive */
@media (max-width: 600px) {
.container {
padding: 1rem;
}
.header h1 {
font-size: 1.5rem;
}
.app-card {
padding: 1rem;
}
.app-icon {
font-size: 1.5rem;
margin-right: 0.75rem;
}
.app-info h3 {
font-size: 1rem;
}
.app-path {
font-size: 0.75rem;
}
}
</style>
</head>
<body>
<div class="container">
${showUserAppKey ? `
<div class="not-found">
<svg class="not-found-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
<h1>应用不存在</h1>
<p>抱歉，您访问的应用 <code>${showUserAppKey || ''}</code> 不存在。</p>
<p>请检查应用 Key 是否正确，或联系管理员。</p>
<a href="/${user}/v1/" class="back-link">← 返回应用列表</a>
</div>
` : ''}
${appListContent}
<pre>${JSON.stringify(infos, null, 2)}</pre>
<div class="footer">
© ${new Date().getFullYear()} Studio - 应用管理
</div>
</div>
</body>
</html>
`;
};

1
src/modules/v1-ws-proxy/proxy.ts
View File

@@ -4,7 +4,6 @@ import { wsProxyManager } from './index.ts';
import { App } from '@kevisual/router';
import { logger } from '../logger.ts';
import { getLoginUser } from '@/modules/auth.ts';
import { createStudioAppListHtml } from '../html/studio-app-list/index.ts';
import { omit } from 'es-toolkit';
import { baseProxyUrl, proxyDomain } from '../domain.ts';
import { renderServerHtml } from '../html/render-server-html.ts';

143
src/routes/flowme/list.ts
View File

@@ -1,5 +1,6 @@
import { desc, eq, count, or, like, and } from 'drizzle-orm';
import { schema, app, db } from '@/app.ts'
import z from 'zod';
// 获取 flowme 列表
app.route({
@@ -7,6 +8,15 @@ app.route({
key: 'list',
middleware: ['auth'],
description: '获取 flowme 列表',
metadata: {
args: {
page: z.number().describe('页码, 默认为 1').optional(),
pageSize: z.number().describe('每页数量, 默认为 20').optional(),
search: z.string().describe('搜索关键词').optional(),
channelId: z.string().describe('频道ID').optional(),
sort: z.enum(['ASC', 'DESC']).describe('排序方式，ASC 或 DESC，默认为 DESC').optional(),
}
}
}).define(async (ctx) => {
const tokenUser = ctx.state.tokenUser;
const uid = tokenUser.id;
@@ -56,61 +66,93 @@ app.route({
return ctx;
}).addTo(app);
// 创建或更新 flowme
const flowmeUpdate = `创建或更新一个 flowme, 参数定义:
title: 标题, 必填
description: 描述, 选填
tags: 标签, 数组, 选填
link: 链接, 选填
data: 数据, 对象, 选填
channelId: 频道ID, 选填
type: 类型, 选填
source: 来源, 选填
importance: 重要性等级, 数字, 选填
`;
// 创建 flowme
app.route({
path: 'flowme',
key: 'create',
middleware: ['auth'],
description: '创建一个 flowme',
metadata: {
args: {
data: z.object({
title: z.string().describe('标题').optional(),
description: z.string().describe('描述').optional(),
tags: z.array(z.string()).describe('标签').optional(),
link: z.string().describe('链接').optional(),
data: z.record(z.string(), z.any()).describe('数据').optional(),
channelId: z.string().describe('频道ID').optional(),
type: z.string().describe('类型').optional(),
source: z.string().describe('来源').optional(),
importance: z.number().describe('重要性等级').optional(),
isArchived: z.boolean().describe('是否归档').optional(),
})
}
}
}).define(async (ctx) => {
const { uid, updatedAt, createdAt, ...rest } = ctx.query.data || {};
const tokenUser = ctx.state.tokenUser;
const flowmeItem = await db.insert(schema.flowme).values({
title: rest.title || '',
description: rest.description || '',
tags: rest.tags || [],
link: rest.link || '',
data: rest.data || {},
channelId: rest.channelId || null,
type: rest.type || '',
source: rest.source || '',
importance: rest.importance || 0,
uid: tokenUser.id,
}).returning();
ctx.body = flowmeItem;
}).addTo(app);
app.route({
path: 'flowme',
key: 'update',
middleware: ['auth'],
description: flowmeUpdate,
description: '更新一个 flowme',
metadata: {
args: {
data: z.object({
id: z.string().describe('ID'),
title: z.string().describe('标题').optional(),
description: z.string().describe('描述').optional(),
tags: z.array(z.string()).describe('标签').optional(),
link: z.string().describe('链接').optional(),
data: z.record(z.string(), z.any()).describe('数据').optional(),
channelId: z.string().describe('频道ID').optional(),
type: z.string().describe('类型').optional(),
source: z.string().describe('来源').optional(),
importance: z.number().describe('重要性等级').optional(),
isArchived: z.boolean().describe('是否归档').optional(),
})
}
}
}).define(async (ctx) => {
const { id, uid, updatedAt, createdAt, ...rest } = ctx.query.data || {};
const tokenUser = ctx.state.tokenUser;
let flowmeItem;
if (!id) {
flowmeItem = await db.insert(schema.flowme).values({
title: rest.title || '',
description: rest.description || '',
tags: rest.tags || [],
link: rest.link || '',
data: rest.data || {},
channelId: rest.channelId || null,
type: rest.type || '',
source: rest.source || '',
importance: rest.importance || 0,
uid: tokenUser.id,
}).returning();
} else {
const existing = await db.select().from(schema.flowme).where(eq(schema.flowme.id, id)).limit(1);
if (existing.length === 0) {
ctx.throw(404, '没有找到对应的 flowme');
}
if (existing[0].uid !== tokenUser.id) {
ctx.throw(403, '没有权限更新该 flowme');
}
flowmeItem = await db.update(schema.flowme).set({
title: rest.title,
description: rest.description,
tags: rest.tags,
link: rest.link,
data: rest.data,
channelId: rest.channelId,
type: rest.type,
source: rest.source,
importance: rest.importance,
isArchived: rest.isArchived,
}).where(eq(schema.flowme.id, id)).returning();
ctx.throw(400, 'id 参数缺失');
}
const existing = await db.select().from(schema.flowme).where(eq(schema.flowme.id, id)).limit(1);
if (existing.length === 0) {
ctx.throw(404, '没有找到对应的 flowme');
}
if (existing[0].uid !== tokenUser.id) {
ctx.throw(403, '没有权限更新该 flowme');
}
const flowmeItem = await db.update(schema.flowme).set({
title: rest.title,
description: rest.description,
tags: rest.tags,
link: rest.link,
data: rest.data,
channelId: rest.channelId,
type: rest.type,
source: rest.source,
importance: rest.importance,
isArchived: rest.isArchived,
}).where(eq(schema.flowme.id, id)).returning();
ctx.body = flowmeItem;
}).addTo(app);
@@ -119,7 +161,14 @@ app.route({
path: 'flowme',
key: 'delete',
middleware: ['auth'],
description: '删除 flowme, 参数: data.id 必填',
description: '删除 flowme ',
metadata: {
args: {
data: z.object({
id: z.string().describe('ID'),
})
}
}
}).define(async (ctx) => {
const tokenUser = ctx.state.tokenUser;
const { id } = ctx.query.data || {};