feat(desktop): align docked workspace with web client
This commit is contained in:
44
apps/desktop/design-qa.md
Normal file
44
apps/desktop/design-qa.md
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
# Desktop App design QA
|
||||||
|
|
||||||
|
## Comparison target
|
||||||
|
|
||||||
|
- Source visual truth: `C:\Users\david\AppData\Local\Temp\codex-clipboard-72c4b101-58e8-44b0-81b4-01abc35a29e6.png`
|
||||||
|
- Implementation screenshot: `test-results/app-home.png`
|
||||||
|
- Full-view viewport: 420 × 820 CSS px at device scale factor 1; implementation image is 420 × 820 px.
|
||||||
|
- Source image: 144 × 343 px. It shows only a narrow icon rail, whereas the implementation contains the requested complete desktop workbench.
|
||||||
|
- State: logged-in light theme, default “全部” project scope, one pending task and one completed task.
|
||||||
|
- Interaction checks: default task board, task edit modal,资料 panel, AI panel, and profile dropdown. Console errors: none.
|
||||||
|
|
||||||
|
## Evidence
|
||||||
|
|
||||||
|
- Full implementation: `test-results/app-home.png`
|
||||||
|
- Focused icon-rail comparison: `test-results/design-qa-rail-comparison.png`
|
||||||
|
- Left: the source’s 75 × 343 px rail crop.
|
||||||
|
- Right: the implementation’s 58 × 820 px right rail, normalized to 75 × 343 px.
|
||||||
|
|
||||||
|
The focused comparison is intentionally rail-only because the source does not provide a full workbench layout. The implementation places the rail on the right as requested, rather than copying the source’s left placement.
|
||||||
|
|
||||||
|
## Findings
|
||||||
|
|
||||||
|
No actionable P0, P1, or P2 findings.
|
||||||
|
|
||||||
|
- Fonts and typography: the application uses the existing Inter / Microsoft YaHei stack. Small rail labels remain legible at the 420 px target width and task titles retain stronger hierarchy.
|
||||||
|
- Spacing and layout rhythm: the 48 px header, 46 px project strip, scrollable content column, and 58 px rail leave the task content unobscured. No horizontal overflow was observed.
|
||||||
|
- Colors and visual tokens: neutral rail, blue selection, green completion, and muted metadata provide equivalent compact navigation contrast to the source while preserving the product’s existing Arco blue token.
|
||||||
|
- Image and icon fidelity: the existing product icon is retained; all navigation controls use the installed Arco icon system. No placeholder or hand-drawn visual assets were introduced.
|
||||||
|
- Copy and content: project scope, task state, profile menu, and submenus use the requested Chinese product language.
|
||||||
|
|
||||||
|
## Follow-up polish
|
||||||
|
|
||||||
|
- [P3] The source has four tall unlabeled icon slots; the implementation has six compact labeled slots because it must expose the requested project views. If the list grows further, group secondary views under “更多”.
|
||||||
|
|
||||||
|
## Implementation checklist
|
||||||
|
|
||||||
|
- [x] Align desktop API fields and request payloads with `web_v1`.
|
||||||
|
- [x] Add theme toggle and user dropdown with profile editing and logout.
|
||||||
|
- [x] Add project scope strip with 全部, previous/next, and create controls.
|
||||||
|
- [x] Move project submenu navigation to the right rail.
|
||||||
|
- [x] Make pending and completed tasks the default editable content.
|
||||||
|
- [x] Verify primary panels and interaction states.
|
||||||
|
|
||||||
|
final result: passed
|
||||||
@@ -4,110 +4,72 @@ import { chromium } from 'playwright'
|
|||||||
const port = Number(process.env.MINI_VISUAL_PORT ?? 4180)
|
const port = Number(process.env.MINI_VISUAL_PORT ?? 4180)
|
||||||
const server = await createServer({ root: process.cwd(), server: { host: '127.0.0.1', port, strictPort: true } })
|
const server = await createServer({ root: process.cwd(), server: { host: '127.0.0.1', port, strictPort: true } })
|
||||||
await server.listen()
|
await server.listen()
|
||||||
|
|
||||||
const browser = await chromium.launch({ headless: true })
|
const browser = await chromium.launch({ headless: true })
|
||||||
const page = await browser.newPage({ viewport: { width: 420, height: 820 }, deviceScaleFactor: 1 })
|
const page = await browser.newPage({ viewport: { width: 420, height: 820 }, deviceScaleFactor: 1 })
|
||||||
const errors = []
|
const errors = []
|
||||||
page.on('console', (message) => { if (message.type() === 'error') errors.push(message.text()) })
|
page.on('console', (message) => { if (message.type() === 'error') errors.push(message.text()) })
|
||||||
|
|
||||||
const projectId = '019b0000-0000-7000-8000-000000000101'
|
const projectId = '019b0000-0000-7000-8000-000000000101'
|
||||||
const expert = {
|
const user = { email: 'demo@senlin.ai', displayName: '演示用户' }
|
||||||
id: '019b0000-0000-7000-8000-000000000102', slug: 'product-manager', category: 'product', categoryName: '产品',
|
|
||||||
name: '产品经理', description: '负责需求分析、路线规划和产品交付。', emoji: '🧭', color: '#165DFF',
|
|
||||||
}
|
|
||||||
const workspace = {
|
const workspace = {
|
||||||
project: { id: projectId, name: '森林项目', identifier: 'forest', icon: 'folder', background: '#165DFF', description: '让项目计划、资料和 AI 协作保持在同一条线上。', initials: '森林', unreadCount: 0 },
|
project: { id: projectId, name: '森林项目', identifier: 'forest', icon: 'folder', background: '#165DFF', description: '项目协作空间', initials: '森林', unreadCount: 0 },
|
||||||
channels: [],
|
channels: [], tags: [{ id: 'tag-product', name: '产品' }, { id: 'tag-design', name: '设计' }], recentSessions: [], inbox: [{ id: 'inbox-1', projectId, source: 'manual', title: '客户反馈', summary: '整理下周的反馈内容', status: 'open', tag: '产品', time: '2026-07-22T10:00:00Z' }],
|
||||||
tags: [{ id: 'tag-product', name: '产品' }, { id: 'tag-design', name: '设计' }],
|
|
||||||
recentSessions: [],
|
|
||||||
inbox: [],
|
|
||||||
tasks: [
|
tasks: [
|
||||||
{ id: 'task-1', projectId, title: '整理产品路线', summary: '确认下一阶段交付范围。', completed: false, owner: '张明', due: null, createdAt: '今天 09:00', completedAt: null, tagId: 'tag-product', tag: '产品' },
|
{ id: 'task-1', projectId, title: '整理产品路线', summary: '确认下一阶段交付范围。', completed: false, owner: '张明', due: null, createdAt: '2026-07-22T09:00:00Z', completedAt: null, tagId: 'tag-product', tag: '产品' },
|
||||||
{ id: 'task-2', projectId, title: '检查迷你布局', summary: '验证窄屏下的导航和滚动。', completed: false, owner: '张明', due: null, createdAt: '今天 10:00', completedAt: null, tagId: 'tag-design', tag: '设计' },
|
{ id: 'task-2', projectId, title: '完成迷你布局', summary: '验证窄屏下的导航和滚动。', completed: true, owner: '张明', due: null, createdAt: '2026-07-21T10:00:00Z', completedAt: '2026-07-22T10:00:00Z', tagId: 'tag-design', tag: '设计' },
|
||||||
],
|
|
||||||
aiSessions: [{ id: 'old-session', projectId, title: '梳理版本计划', summary: '项目会话', updatedAt: '今天', references: [] }],
|
|
||||||
documents: [
|
|
||||||
{ id: 'note-1', projectId, kind: 'markdown', name: '版本规划', extension: '.md', mimeType: 'text/markdown', updatedAt: '今天' },
|
|
||||||
{ id: 'source-1', projectId, kind: 'file', name: '需求说明.pdf', extension: '.pdf', mimeType: 'application/pdf', updatedAt: '昨天' },
|
|
||||||
],
|
],
|
||||||
|
aiSessions: [{ id: 'session-1', projectId, title: '梳理版本计划', summary: '下一步怎么安排', updatedAt: '2026-07-22T10:00:00Z', references: [] }],
|
||||||
|
documents: [{ id: 'doc-1', projectId, kind: 'markdown', name: '版本规划', extension: '.md', mimeType: 'text/markdown', updatedAt: '2026-07-22T10:00:00Z' }],
|
||||||
cronPlans: [{ id: 'cron-1', projectId, title: '每周复盘', schedule: '0 17 * * 5', nextRun: null, enabled: true, lastResult: '', owner: '张明' }],
|
cronPlans: [{ id: 'cron-1', projectId, title: '每周复盘', schedule: '0 17 * * 5', nextRun: null, enabled: true, lastResult: '', owner: '张明' }],
|
||||||
}
|
}
|
||||||
|
const expert = { id: 'expert-1', slug: 'product-manager', category: 'product', categoryName: '产品', name: '产品经理', description: '负责需求分析', emoji: '📘', color: '#165DFF' }
|
||||||
|
|
||||||
await page.route('http://localhost:9150/api/v1/**', async (route) => {
|
await page.route('http://localhost:9150/api/v1/**', async (route) => {
|
||||||
const request = route.request()
|
const request = route.request(); const path = new URL(request.url()).pathname
|
||||||
const path = new URL(request.url()).pathname
|
if (path === '/api/v1/auth/login') return route.fulfill({ json: { token: 'app-token', user } })
|
||||||
if (path === '/api/v1/status') return route.fulfill({ json: { status: 'unavailable' } })
|
if (path === '/api/v1/auth/me') return route.fulfill({ json: user })
|
||||||
if (path === '/api/v1/auth/login') return route.fulfill({ json: { token: 'mini-token' } })
|
if (path === '/api/v1/projects') return route.fulfill({ json: [workspace.project] })
|
||||||
if (path === '/api/v1/projects') {
|
|
||||||
if (request.method() === 'POST') return route.fulfill({ status: 201, json: workspace.project })
|
|
||||||
return route.fulfill({ json: [workspace.project] })
|
|
||||||
}
|
|
||||||
if (path === `/api/v1/projects/${projectId}/workspace`) return route.fulfill({ json: workspace })
|
if (path === `/api/v1/projects/${projectId}/workspace`) return route.fulfill({ json: workspace })
|
||||||
if (path === '/api/v1/ai-experts') return route.fulfill({ json: [expert, { ...expert, id: 'expert-2', name: 'UI 设计师', category: 'design', categoryName: '设计', emoji: '🎨', color: '#722ED1' }] })
|
if (path === '/api/v1/ai-experts') return route.fulfill({ json: [expert] })
|
||||||
if (path === `/api/v1/projects/${projectId}/ai-sessions`) {
|
|
||||||
if (request.method() === 'POST') {
|
|
||||||
const input = request.postDataJSON()
|
|
||||||
return route.fulfill({ status: 201, json: { id: 'session-new', projectId, title: input.title, context: input.context, status: 'ready', expert, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() } })
|
|
||||||
}
|
|
||||||
return route.fulfill({ json: [{ id: 'session-1', projectId, title: '梳理版本计划', context: '下一步怎么安排', status: 'ready', expert, createdAt: '2026-07-22T10:00:00Z', updatedAt: '2026-07-22T10:00:00Z' }] })
|
|
||||||
}
|
|
||||||
if (path.includes('/tasks/') && request.method() === 'PATCH') return route.fulfill({ json: {} })
|
if (path.includes('/tasks/') && request.method() === 'PATCH') return route.fulfill({ json: {} })
|
||||||
if (path.endsWith('/tasks') && request.method() === 'POST') return route.fulfill({ status: 201, json: {} })
|
return route.fulfill({ status: 404, json: { error: { code: 'not_found', message: '未配置的检查接口' } } })
|
||||||
if (path.endsWith('/cron-plans') && request.method() === 'POST') return route.fulfill({ status: 201, json: {} })
|
|
||||||
return route.fulfill({ status: 404, json: { error: { code: 'not_found', message: '未配置的视觉检查接口' } } })
|
|
||||||
})
|
})
|
||||||
|
|
||||||
await page.goto(`http://127.0.0.1:${port}/`, { waitUntil: 'networkidle' })
|
await page.goto(`http://127.0.0.1:${port}/`, { waitUntil: 'networkidle' })
|
||||||
await page.waitForSelector('.mini-connection.offline')
|
await page.locator('.login-card input').nth(2).press('Enter')
|
||||||
const offlineConnection = await page.locator('.mini-connection').evaluate((element) => ({
|
await page.waitForSelector('.app-shell')
|
||||||
text: element.textContent,
|
await page.waitForSelector('.task-row')
|
||||||
borderColor: getComputedStyle(element).borderColor,
|
|
||||||
}))
|
|
||||||
await page.screenshot({ path: 'test-results/app-login.png', fullPage: true })
|
|
||||||
const loginDefaults = await page.locator('.login-note input').evaluateAll((inputs) => inputs.map((input) => input.value))
|
|
||||||
await page.locator('.login-note input').nth(2).press('Enter')
|
|
||||||
await page.waitForSelector('.mini-shell')
|
|
||||||
await page.waitForTimeout(400)
|
|
||||||
await page.screenshot({ path: 'test-results/app-home.png', fullPage: true })
|
await page.screenshot({ path: 'test-results/app-home.png', fullPage: true })
|
||||||
|
|
||||||
const home = await page.evaluate(() => ({
|
const home = await page.evaluate(() => ({
|
||||||
width: document.querySelector('.mini-shell')?.getBoundingClientRect().width,
|
width: document.querySelector('.app-shell')?.getBoundingClientRect().width,
|
||||||
navCount: document.querySelectorAll('.mini-nav button').length,
|
selectedAll: document.querySelector('.project-pill.active span')?.textContent,
|
||||||
overflowX: document.documentElement.scrollWidth > document.documentElement.clientWidth,
|
navCount: document.querySelectorAll('.channel-rail button').length,
|
||||||
title: document.querySelector('.page-intro h4')?.textContent ?? '',
|
pending: document.querySelectorAll('.task-row:not(.done)').length,
|
||||||
|
completed: document.querySelectorAll('.task-row.done').length,
|
||||||
}))
|
}))
|
||||||
|
await page.locator('.task-row').first().click()
|
||||||
await page.getByRole('button', { name: '计划', exact: true }).click()
|
const taskModal = await page.getByText('编辑任务').count()
|
||||||
await page.getByRole('button', { name: '设计', exact: true }).click()
|
await page.getByRole('button', { name: '取消' }).click()
|
||||||
const tasks = await page.evaluate(() => ({
|
await page.locator('.channel-rail button[title="资料"]').click()
|
||||||
count: document.querySelectorAll('.task-note').length,
|
const documents = await page.locator('.detail-row').count()
|
||||||
title: document.querySelector('.task-note strong')?.textContent ?? '',
|
await page.locator('.channel-rail button[title="AI"]').click()
|
||||||
}))
|
await page.waitForSelector('.expert-chips')
|
||||||
await page.screenshot({ path: 'test-results/app-tasks.png', fullPage: true })
|
const experts = await page.locator('.expert-chips span').count()
|
||||||
|
await page.locator('.profile-trigger').click()
|
||||||
await page.getByRole('button', { name: '资料', exact: true }).click()
|
await page.getByText('修改资料').waitFor()
|
||||||
const notes = await page.locator('.source-note').count()
|
const profileMenu = await page.getByText('修改资料').count()
|
||||||
|
|
||||||
await page.getByRole('button', { name: 'AI', exact: true }).click()
|
|
||||||
await page.getByRole('button', { name: /产品经理/ }).click()
|
|
||||||
await page.locator('.mini-composer textarea').fill('请给出下一步计划')
|
|
||||||
const sendEnabled = await page.getByRole('button', { name: '开始会话' }).isEnabled()
|
|
||||||
await page.screenshot({ path: 'test-results/app-ai.png', fullPage: true })
|
await page.screenshot({ path: 'test-results/app-ai.png', fullPage: true })
|
||||||
|
await browser.close(); await server.close()
|
||||||
await browser.close()
|
|
||||||
await server.close()
|
|
||||||
|
|
||||||
const failures = []
|
const failures = []
|
||||||
if (!offlineConnection.text?.includes('连接异常') || offlineConnection.borderColor !== 'rgb(245, 63, 63)') failures.push(`offline connection must be red: ${JSON.stringify(offlineConnection)}`)
|
|
||||||
if (loginDefaults[1] !== 'demo@senlin.ai' || loginDefaults[2] !== 'password123') failures.push(`login defaults failed: ${JSON.stringify(loginDefaults)}`)
|
|
||||||
if (errors.length) failures.push(`console errors: ${errors.join('; ')}`)
|
|
||||||
if (home.width !== 420) failures.push(`expected 420px shell, got ${home.width}`)
|
if (home.width !== 420) failures.push(`expected 420px shell, got ${home.width}`)
|
||||||
if (home.navCount !== 5) failures.push(`expected five top navigation items, got ${home.navCount}`)
|
if (home.selectedAll !== '全部') failures.push(`default project scope must be 全部, got ${home.selectedAll}`)
|
||||||
if (home.overflowX) failures.push('mini client has horizontal overflow')
|
if (home.navCount !== 6) failures.push(`expected six right rail menus, got ${home.navCount}`)
|
||||||
if (home.title !== '森林项目') failures.push(`project overview missing, got ${home.title}`)
|
if (home.pending !== 1 || home.completed !== 1) failures.push(`task sections incorrect: ${JSON.stringify(home)}`)
|
||||||
if (tasks.count !== 1 || tasks.title !== '检查迷你布局') failures.push(`task tag filtering failed: ${JSON.stringify(tasks)}`)
|
if (taskModal !== 1) failures.push('task editor did not open')
|
||||||
if (notes !== 2) failures.push(`expected two note cards, got ${notes}`)
|
if (documents !== 1) failures.push(`expected one document, got ${documents}`)
|
||||||
if (!sendEnabled) failures.push('AI composer must enable after selecting an expert and entering a prompt')
|
if (experts !== 1) failures.push(`expected one AI expert, got ${experts}`)
|
||||||
|
if (profileMenu !== 1) failures.push('profile menu did not open')
|
||||||
console.log(JSON.stringify({ home, tasks, notes, sendEnabled, errors }, null, 2))
|
if (errors.length) failures.push(`console errors: ${errors.join('; ')}`)
|
||||||
|
console.log(JSON.stringify({ home, documents, experts, taskModal, profileMenu, errors }, null, 2))
|
||||||
if (failures.length) throw new Error(failures.join('\n'))
|
if (failures.length) throw new Error(failures.join('\n'))
|
||||||
|
|||||||
@@ -1,325 +1,63 @@
|
|||||||
import { useEffect, useRef, useState } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
import { Alert, Avatar, Button, Empty, Input, Message, Modal, Select, Spin, Tag, Typography } from '@arco-design/web-react'
|
import { Alert, Avatar, Button, Dropdown, Empty, Form, Input, Menu, Modal, Select, Spin, Switch, Tag, Typography } from '@arco-design/web-react'
|
||||||
import {
|
import {
|
||||||
IconApps, IconCheckCircle, IconClockCircle,
|
IconApps, IconCheckCircle, IconCheckCircleFill, IconClockCircle, IconDown, IconEmail, IconFile,
|
||||||
IconFile, IconFolder, IconPlus, IconRefresh, IconRobot, IconSearch, IconSettings,
|
IconFolder, IconLeft, IconList, IconMoon, IconPlus, IconRight, IconRobot,
|
||||||
|
IconSun, IconUser,
|
||||||
} from '@arco-design/web-react/icon'
|
} from '@arco-design/web-react/icon'
|
||||||
import {
|
import {
|
||||||
ApiError, checkServerConnection, createAISession, createCron, createProject, createTask, fetchAISessions, fetchExperts,
|
ApiError, createProject, fetchProjectWorkspace, fetchProjects, getCurrentUser,
|
||||||
fetchProjects, fetchWorkspace, login, updateTask, uploadSource,
|
listAIExperts, login, setApiBaseUrl, updateCurrentUser, updateTask,
|
||||||
type AISession, type ApiSession, type Expert, type Project, type Workspace,
|
type ApiSession, type CurrentUser, type Expert, type Project, type Workspace, type WorkspaceTask,
|
||||||
} from './api'
|
} from './api'
|
||||||
|
|
||||||
const { Text, Title } = Typography
|
const { Text, Title } = Typography
|
||||||
type View = 'home' | 'tasks' | 'notes' | 'ai' | 'more'
|
const SESSION_KEY = 'senlin-app-session'
|
||||||
type Action = 'project' | 'task' | 'cron' | null
|
type View = 'overview' | 'tasks' | 'inbox' | 'documents' | 'ai' | 'cron'
|
||||||
type ConnectionStatus = 'checking' | 'online' | 'offline'
|
type SavedSession = ApiSession & { user?: CurrentUser }
|
||||||
|
type TaskWithProject = WorkspaceTask & { projectName: string }
|
||||||
|
|
||||||
const navItems: Array<{ id: View; label: string; icon: React.ReactNode }> = [
|
const navItems: Array<{ id: View; label: string; icon: React.ReactNode }> = [
|
||||||
{ id: 'home', label: '项目', icon: <IconApps /> },
|
{ id: 'overview', label: '概况', icon: <IconApps /> },
|
||||||
{ id: 'tasks', label: '计划', icon: <IconCheckCircle /> },
|
{ id: 'tasks', label: '计划', icon: <IconList /> },
|
||||||
{ id: 'notes', label: '资料', icon: <IconFile /> },
|
{ id: 'inbox', label: '收集箱', icon: <IconEmail /> },
|
||||||
|
{ id: 'documents', label: '资料', icon: <IconFile /> },
|
||||||
{ id: 'ai', label: 'AI', icon: <IconRobot /> },
|
{ id: 'ai', label: 'AI', icon: <IconRobot /> },
|
||||||
{ id: 'more', label: '更多', icon: <IconSettings /> },
|
{ id: 'cron', label: '周期计划', icon: <IconClockCircle /> },
|
||||||
]
|
]
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
const [session, setSession] = useState<ApiSession | null>(() => readStoredSession())
|
const stored = useMemo(readStoredSession, [])
|
||||||
|
const [session, setSession] = useState<ApiSession | null>(stored)
|
||||||
|
const [user, setUser] = useState<CurrentUser | null>(stored?.user ?? null)
|
||||||
const [projects, setProjects] = useState<Project[]>([])
|
const [projects, setProjects] = useState<Project[]>([])
|
||||||
|
const [workspaces, setWorkspaces] = useState<Record<string, Workspace>>({})
|
||||||
const [projectId, setProjectId] = useState('')
|
const [projectId, setProjectId] = useState('')
|
||||||
const [workspace, setWorkspace] = useState<Workspace | null>(null)
|
const [view, setView] = useState<View>('overview')
|
||||||
const [experts, setExperts] = useState<Expert[]>([])
|
const [dark, setDark] = useState(false)
|
||||||
const [aiSessions, setAISessions] = useState<AISession[]>([])
|
const [loading, setLoading] = useState(Boolean(stored))
|
||||||
const [view, setView] = useState<View>('home')
|
|
||||||
const [loading, setLoading] = useState(Boolean(session))
|
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('')
|
||||||
const [action, setAction] = useState<Action>(null)
|
const [taskEditor, setTaskEditor] = useState<TaskWithProject | null>(null)
|
||||||
const refreshGeneration = useRef(0)
|
const [projectModalOpen, setProjectModalOpen] = useState(false)
|
||||||
|
const [profileModalOpen, setProfileModalOpen] = useState(false)
|
||||||
|
const [experts, setExperts] = useState<Expert[]>([])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!session) return
|
if (!session) return
|
||||||
let cancelled = false
|
if (!user) void getCurrentUser(session).then(setUser).catch((requestError) => setError(errorMessage(requestError)))
|
||||||
setLoading(true)
|
void loadWorkspaces(session)
|
||||||
void fetchProjects(session)
|
|
||||||
.then((items) => {
|
|
||||||
if (cancelled) return
|
|
||||||
setProjects(items)
|
|
||||||
setProjectId((current) => items.some((item) => item.id === current) ? current : items[0]?.id ?? '')
|
|
||||||
})
|
|
||||||
.catch((requestError) => !cancelled && setError(errorMessage(requestError)))
|
|
||||||
.finally(() => !cancelled && setLoading(false))
|
|
||||||
return () => { cancelled = true }
|
|
||||||
}, [session])
|
}, [session])
|
||||||
|
|
||||||
useEffect(() => {
|
async function loadWorkspaces(activeSession = session) {
|
||||||
if (!session || !projectId) return
|
if (!activeSession) return
|
||||||
void refreshProject(session, projectId)
|
|
||||||
}, [projectId, session])
|
|
||||||
|
|
||||||
async function refreshProject(activeSession = session, activeProject = projectId) {
|
|
||||||
if (!activeSession || !activeProject) return
|
|
||||||
const generation = ++refreshGeneration.current
|
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
setError('')
|
setError('')
|
||||||
try {
|
try {
|
||||||
const [nextWorkspace, nextExperts, nextSessions] = await Promise.all([
|
const nextProjects = await fetchProjects(activeSession)
|
||||||
fetchWorkspace(activeSession, activeProject),
|
const items = await Promise.all(nextProjects.map(async (project) => [project.id, await fetchProjectWorkspace(activeSession, project.id)] as const))
|
||||||
experts.length ? Promise.resolve(experts) : fetchExperts(activeSession),
|
setProjects(nextProjects)
|
||||||
fetchAISessions(activeSession, activeProject),
|
setWorkspaces(Object.fromEntries(items))
|
||||||
])
|
setProjectId((current) => current && nextProjects.some((project) => project.id === current) ? current : '')
|
||||||
if (generation !== refreshGeneration.current) return
|
|
||||||
setWorkspace(nextWorkspace)
|
|
||||||
setExperts(nextExperts)
|
|
||||||
setAISessions(nextSessions)
|
|
||||||
} catch (requestError) {
|
|
||||||
if (generation === refreshGeneration.current) setError(errorMessage(requestError))
|
|
||||||
} finally {
|
|
||||||
if (generation === refreshGeneration.current) setLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!session) return <Login onLogin={(next) => { localStorage.setItem('senlin-mini-session', JSON.stringify(next)); setSession(next) }} />
|
|
||||||
|
|
||||||
const activeProject = projects.find((project) => project.id === projectId) ?? projects[0]
|
|
||||||
const content = !workspace || !activeProject
|
|
||||||
? <Empty description="还没有项目，点击右上角新建" />
|
|
||||||
: renderView(view, {
|
|
||||||
session, workspace, experts, aiSessions,
|
|
||||||
refresh: () => refreshProject(),
|
|
||||||
openAction: setAction,
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mini-shell">
|
|
||||||
<header className="mini-header" data-tauri-drag-region>
|
|
||||||
<div className="mini-brand" data-tauri-drag-region>
|
|
||||||
<img src="/senlinai-icon.svg" alt="" />
|
|
||||||
<span>森林AI</span>
|
|
||||||
<Tag size="small" color="arcoblue">App 1.0</Tag>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div className="project-switcher">
|
|
||||||
<Select
|
|
||||||
value={projectId || undefined}
|
|
||||||
placeholder="选择项目"
|
|
||||||
onChange={setProjectId}
|
|
||||||
triggerElement={() => (
|
|
||||||
<button className="project-trigger">
|
|
||||||
<Avatar size={26} style={{ background: activeProject?.background || '#165DFF' }}>{projectMark(activeProject)}</Avatar>
|
|
||||||
<span>{activeProject?.name || '选择项目'}</span>
|
|
||||||
<small>{activeProject?.identifier || ''}</small>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{projects.map((project) => <Select.Option key={project.id} value={project.id}>{project.name}</Select.Option>)}
|
|
||||||
</Select>
|
|
||||||
<Button aria-label="刷新" type="text" shape="circle" icon={<IconRefresh />} loading={loading} onClick={() => void refreshProject()} />
|
|
||||||
<Button aria-label="新建项目" type="text" shape="circle" icon={<IconPlus />} onClick={() => setAction('project')} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav className="mini-nav" aria-label="主要导航">
|
|
||||||
{navItems.map((item) => (
|
|
||||||
<button className={view === item.id ? 'active' : ''} key={item.id} onClick={() => setView(item.id)}>
|
|
||||||
{item.icon}<span>{item.label}</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{error ? <Alert className="mini-alert" type="error" content={error} closable onClose={() => setError('')} /> : null}
|
|
||||||
<main className="mini-content"><Spin loading={loading} block>{content}</Spin></main>
|
|
||||||
|
|
||||||
<footer className="mini-footer">
|
|
||||||
<span><i /> 服务已连接</span>
|
|
||||||
<button onClick={() => { localStorage.removeItem('senlin-mini-session'); setSession(null); setWorkspace(null) }}>退出登录</button>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<ActionModal
|
|
||||||
action={action}
|
|
||||||
workspace={workspace}
|
|
||||||
onClose={() => setAction(null)}
|
|
||||||
onProject={async (name) => {
|
|
||||||
const project = await createProject(session, name)
|
|
||||||
const next = await fetchProjects(session)
|
|
||||||
setProjects(next)
|
|
||||||
setProjectId(project.id)
|
|
||||||
}}
|
|
||||||
onTask={async (title, tag) => {
|
|
||||||
if (!projectId) return
|
|
||||||
await createTask(session, projectId, title, tag)
|
|
||||||
await refreshProject()
|
|
||||||
}}
|
|
||||||
onCron={async (title, schedule) => {
|
|
||||||
if (!projectId) return
|
|
||||||
await createCron(session, projectId, title, schedule)
|
|
||||||
await refreshProject()
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderView(view: View, props: ViewProps) {
|
|
||||||
if (view === 'tasks') return <TasksView {...props} />
|
|
||||||
if (view === 'notes') return <NotesView {...props} />
|
|
||||||
if (view === 'ai') return <AIView {...props} />
|
|
||||||
if (view === 'more') return <MoreView {...props} />
|
|
||||||
return <HomeView {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
type ViewProps = {
|
|
||||||
session: ApiSession
|
|
||||||
workspace: Workspace
|
|
||||||
experts: Expert[]
|
|
||||||
aiSessions: AISession[]
|
|
||||||
refresh: () => void | Promise<void>
|
|
||||||
openAction: (action: Action) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
function HomeView({ workspace, openAction }: ViewProps) {
|
|
||||||
const pending = workspace.tasks.filter((task) => !task.completed)
|
|
||||||
return (
|
|
||||||
<section className="mini-page home-view">
|
|
||||||
<div className="page-intro">
|
|
||||||
<Text type="secondary">当前项目</Text>
|
|
||||||
<Title heading={4}>{workspace.project.name}</Title>
|
|
||||||
<p>{workspace.project.description || '把计划、资料与 AI 会话放进同一个项目上下文。'}</p>
|
|
||||||
</div>
|
|
||||||
<div className="metric-grid">
|
|
||||||
<Metric value={pending.length} label="待办计划" color="blue" />
|
|
||||||
<Metric value={workspace.documents.length} label="笔记资料" color="green" />
|
|
||||||
<Metric value={workspace.aiSessions.length} label="AI 会话" color="purple" />
|
|
||||||
<Metric value={workspace.cronPlans.length} label="计划任务" color="orange" />
|
|
||||||
</div>
|
|
||||||
<div className="section-title"><strong>快速操作</strong></div>
|
|
||||||
<div className="quick-actions">
|
|
||||||
<button onClick={() => openAction('task')}><IconPlus /><span><b>新建计划</b><small>快速记录下一步</small></span></button>
|
|
||||||
<button onClick={() => openAction('cron')}><IconClockCircle /><span><b>计划任务</b><small>添加周期安排</small></span></button>
|
|
||||||
</div>
|
|
||||||
<div className="section-title"><strong>接下来</strong><Tag color="arcoblue">{pending.length}</Tag></div>
|
|
||||||
<div className="compact-list">
|
|
||||||
{pending.slice(0, 4).map((task) => <div key={task.id}><IconCheckCircle /><span><b>{task.title}</b><small>{task.tag || '未分类'}</small></span></div>)}
|
|
||||||
{!pending.length && <Empty description="当前没有未完成计划" />}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Metric({ value, label, color }: { value: number; label: string; color: string }) {
|
|
||||||
return <div className={`metric ${color}`}><strong>{value}</strong><span>{label}</span></div>
|
|
||||||
}
|
|
||||||
|
|
||||||
function TasksView({ session, workspace, refresh, openAction }: ViewProps) {
|
|
||||||
const [tag, setTag] = useState('全部')
|
|
||||||
const tags = workspace.tags.filter((item) => item.name !== '全部' && item.name !== 'all')
|
|
||||||
const tasks = tag === '全部' ? workspace.tasks : workspace.tasks.filter((task) => task.tag === tag)
|
|
||||||
return (
|
|
||||||
<section className="mini-page">
|
|
||||||
<div className="page-title"><div><Title heading={5}>工作计划</Title><Text type="secondary">轻点圆圈即可更新状态</Text></div><Button type="primary" size="small" icon={<IconPlus />} onClick={() => openAction('task')}>新建</Button></div>
|
|
||||||
<div className="filter-strip">
|
|
||||||
{['全部', ...tags.map((item) => item.name)].map((item) => <button className={tag === item ? 'active' : ''} key={item} onClick={() => setTag(item)}>{item}</button>)}
|
|
||||||
</div>
|
|
||||||
<div className="sticky-list">
|
|
||||||
{tasks.map((task) => (
|
|
||||||
<article className={task.completed ? 'task-note completed' : 'task-note'} key={task.id}>
|
|
||||||
<button className="task-check" aria-label={task.completed ? '恢复计划' : '完成计划'} onClick={async () => { await updateTask(session, workspace.project.id, task); await refresh() }}><IconCheckCircle /></button>
|
|
||||||
<div><strong>{task.title}</strong><p>{task.summary || '暂无说明'}</p><span>{task.tag || '未分类'} · {task.createdAt}</span></div>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
{!tasks.length && <Empty description="当前筛选下没有计划" />}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function NotesView({ session, workspace, refresh }: ViewProps) {
|
|
||||||
const fileInput = useRef<HTMLInputElement>(null)
|
|
||||||
return (
|
|
||||||
<section className="mini-page">
|
|
||||||
<div className="page-title"><div><Title heading={5}>笔记资料</Title><Text type="secondary">项目资料随手可取</Text></div><Button type="primary" size="small" icon={<IconPlus />} onClick={() => fileInput.current?.click()}>上传</Button></div>
|
|
||||||
<input className="hidden-file" ref={fileInput} type="file" onChange={async (event) => { const file = event.target.files?.[0]; if (!file) return; await uploadSource(session, workspace.project.id, file); await refresh(); event.target.value = '' }} />
|
|
||||||
<div className="note-grid">
|
|
||||||
{workspace.documents.map((document, index) => <article className={`source-note tone-${index % 4}`} key={document.id}><IconFile /><strong>{document.name}</strong><p>{document.extension || document.mimeType || document.kind}</p><span>{document.kind || '资料'} · {document.updatedAt}</span></article>)}
|
|
||||||
{!workspace.documents.length && <Empty description="还没有笔记或资料" />}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function AIView({ session, workspace, experts, aiSessions, refresh }: ViewProps) {
|
|
||||||
const [query, setQuery] = useState('')
|
|
||||||
const [category, setCategory] = useState('全部')
|
|
||||||
const [expertId, setExpertId] = useState('')
|
|
||||||
const [prompt, setPrompt] = useState('')
|
|
||||||
const [sending, setSending] = useState(false)
|
|
||||||
const categories = [...new Set(experts.map((expert) => expert.categoryName))]
|
|
||||||
const visible = experts.filter((expert) => (category === '全部' || expert.categoryName === category) && `${expert.name}${expert.description}`.toLowerCase().includes(query.toLowerCase()))
|
|
||||||
const selected = experts.find((expert) => expert.id === expertId)
|
|
||||||
return (
|
|
||||||
<section className="mini-page ai-view">
|
|
||||||
<div className="page-title"><div><Title heading={5}>AI 会话</Title><Text type="secondary">先选择专家，再开始会话</Text></div><Tag color="purple">{experts.length} 位</Tag></div>
|
|
||||||
<Input prefix={<IconSearch />} value={query} onChange={setQuery} allowClear placeholder="搜索专家" />
|
|
||||||
<div className="filter-strip">
|
|
||||||
{['全部', ...categories].map((item) => <button className={category === item ? 'active' : ''} key={item} onClick={() => setCategory(item)}>{item}</button>)}
|
|
||||||
</div>
|
|
||||||
<div className="expert-strip">
|
|
||||||
{visible.slice(0, 30).map((expert) => <button className={expertId === expert.id ? 'active' : ''} key={expert.id} onClick={() => setExpertId(expert.id)}><i style={{ background: expert.color }}>{expert.emoji}</i><span><b>{expert.name}</b><small>{expert.categoryName}</small></span></button>)}
|
|
||||||
</div>
|
|
||||||
<div className="mini-composer">
|
|
||||||
<div className="selected-expert">{selected ? <><i style={{ background: selected.color }}>{selected.emoji}</i><span><b>{selected.name}</b><small>{selected.description}</small></span></> : <Text type="secondary">选择一位专家进行会话</Text>}</div>
|
|
||||||
<Input.TextArea value={prompt} onChange={setPrompt} autoSize={{ minRows: 3, maxRows: 6 }} placeholder={selected ? `向${selected.name}发送消息` : '请先选择专家'} />
|
|
||||||
<Button type="primary" long loading={sending} disabled={!selected || !prompt.trim()} onClick={async () => { if (!selected) return; setSending(true); try { await createAISession(session, workspace.project.id, selected.id, prompt.trim()); setPrompt(''); await refresh() } finally { setSending(false) } }}>开始会话</Button>
|
|
||||||
</div>
|
|
||||||
<div className="section-title"><strong>最近会话</strong></div>
|
|
||||||
<div className="session-list">{aiSessions.slice(0, 5).map((item) => <div key={item.id}><i style={{ background: item.expert?.color }}>{item.expert?.emoji || '🤖'}</i><span><b>{item.title}</b><small>{item.expert?.name || '森林AI'}</small></span></div>)}</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function MoreView({ workspace, openAction }: ViewProps) {
|
|
||||||
return (
|
|
||||||
<section className="mini-page">
|
|
||||||
<div className="page-title"><div><Title heading={5}>更多</Title><Text type="secondary">项目周期安排与客户端信息</Text></div><Button size="small" icon={<IconPlus />} onClick={() => openAction('cron')}>计划任务</Button></div>
|
|
||||||
<div className="settings-card"><strong>计划任务</strong>{workspace.cronPlans.map((plan) => <div key={plan.id}><IconClockCircle /><span><b>{plan.title}</b><small>{plan.schedule} · {plan.enabled ? '已启用' : '已停用'}</small></span></div>)}{!workspace.cronPlans.length && <Text type="secondary">暂无周期计划</Text>}</div>
|
|
||||||
<div className="settings-card"><strong>停靠说明</strong><p>顶部箭头可将桌面窗口停靠至当前屏幕左侧或右侧。Web 模式会记住布局偏好，桌面模式会同时移动实际窗口。</p></div>
|
|
||||||
<div className="settings-card version-card"><img src="/senlinai-icon.svg" alt="" /><span><b>森林AI App</b><small>v1.0 · 停靠客户端</small></span></div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Login({ onLogin }: { onLogin: (session: ApiSession) => void }) {
|
|
||||||
const [server, setServer] = useState('http://localhost:9150')
|
|
||||||
const [email, setEmail] = useState('demo@senlin.ai')
|
|
||||||
const [password, setPassword] = useState('password123')
|
|
||||||
const [loading, setLoading] = useState(false)
|
|
||||||
const [error, setError] = useState('')
|
|
||||||
const [connection, setConnection] = useState<ConnectionStatus>('checking')
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const controller = new AbortController()
|
|
||||||
const timer = window.setTimeout(() => void checkConnection(controller.signal), 300)
|
|
||||||
return () => {
|
|
||||||
controller.abort()
|
|
||||||
window.clearTimeout(timer)
|
|
||||||
}
|
|
||||||
}, [server])
|
|
||||||
|
|
||||||
async function checkConnection(signal?: AbortSignal) {
|
|
||||||
setConnection('checking')
|
|
||||||
try {
|
|
||||||
const online = await checkServerConnection(server, signal)
|
|
||||||
if (!signal?.aborted) setConnection(online ? 'online' : 'offline')
|
|
||||||
} catch (requestError) {
|
|
||||||
if (!(requestError instanceof DOMException && requestError.name === 'AbortError')) setConnection('offline')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function submitLogin() {
|
|
||||||
if (loading) return
|
|
||||||
setLoading(true)
|
|
||||||
setError('')
|
|
||||||
try {
|
|
||||||
onLogin(await login(server, email.trim(), password))
|
|
||||||
} catch (requestError) {
|
} catch (requestError) {
|
||||||
setError(errorMessage(requestError))
|
setError(errorMessage(requestError))
|
||||||
} finally {
|
} finally {
|
||||||
@@ -327,72 +65,159 @@ function Login({ onLogin }: { onLogin: (session: ApiSession) => void }) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function loadAI() {
|
||||||
|
if (!session || experts.length) return
|
||||||
|
try { setExperts(await listAIExperts(session)) } catch (requestError) { setError(errorMessage(requestError)) }
|
||||||
|
}
|
||||||
|
|
||||||
|
const visibleWorkspaces = projectId ? [workspaces[projectId]].filter(Boolean) : Object.values(workspaces)
|
||||||
|
const activeProject = projectId ? projects.find((project) => project.id === projectId) : undefined
|
||||||
|
const tasks = visibleWorkspaces.flatMap((workspace) => workspace.tasks.map((task) => ({ ...task, projectName: workspace.project.name })))
|
||||||
|
const title = activeProject?.name ?? '全部项目'
|
||||||
|
|
||||||
|
function cycleProject(direction: number) {
|
||||||
|
const index = projects.findIndex((project) => project.id === projectId)
|
||||||
|
const next = projectId ? (index + direction + projects.length) % projects.length : direction > 0 ? 0 : projects.length - 1
|
||||||
|
setProjectId(projects[next]?.id ?? '')
|
||||||
|
}
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
localStorage.removeItem(SESSION_KEY)
|
||||||
|
localStorage.removeItem('senlin-mini-session')
|
||||||
|
setSession(null); setUser(null); setProjects([]); setWorkspaces({}); setProjectId(''); setView('overview')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!session) return <Login onLogin={(next) => { setSession(next); setUser(next.user); persistSession(next) }} />
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mini-login">
|
<div className={`app-shell ${dark ? 'theme-dark' : ''}`}>
|
||||||
<form className="login-note" onSubmit={(event) => { event.preventDefault(); void submitLogin() }}>
|
<header className="app-header">
|
||||||
<img src="/senlinai-icon.svg" alt="" />
|
<div className="app-brand" data-tauri-drag-region><img src="/senlinai-icon.svg" alt="" /><span>森林AI</span></div>
|
||||||
<Title heading={3}>森林AI App</Title>
|
<div className="header-actions">
|
||||||
<Text type="secondary">停靠在屏幕一侧，随时记录与推进项目</Text>
|
<Button type="text" shape="circle" aria-label={dark ? '切换浅色模式' : '切换深色模式'} icon={dark ? <IconSun /> : <IconMoon />} onClick={() => setDark((value) => !value)} />
|
||||||
<label>服务器地址<Input value={server} onChange={setServer} /></label>
|
<ProfileMenu user={user} onProfile={() => setProfileModalOpen(true)} onLogout={() => logout()} />
|
||||||
<div className={`mini-connection ${connection}`} role="status">
|
|
||||||
<i />
|
|
||||||
<strong>{connection === 'checking' ? '正在检查' : connection === 'online' ? '连接正常' : '连接异常'}</strong>
|
|
||||||
<button type="button" onClick={() => void checkConnection()}>{connection === 'checking' ? '检查中' : '重新检查'}</button>
|
|
||||||
</div>
|
</div>
|
||||||
<label>邮箱<Input value={email} onChange={setEmail} /></label>
|
</header>
|
||||||
<label>密码<Input.Password value={password} onChange={setPassword} /></label>
|
|
||||||
{error ? <Alert type="error" content={error} /> : null}
|
<section className="project-strip" aria-label="项目列表">
|
||||||
<Button type="primary" htmlType="submit" long loading={loading}>连接工作台</Button>
|
<button className={!projectId ? 'project-pill active' : 'project-pill'} onClick={() => setProjectId('')}><IconApps /><span>全部</span></button>
|
||||||
<small>v1.0 完整版</small>
|
<div className="project-scroller">
|
||||||
</form>
|
{projects.map((project) => <button key={project.id} className={projectId === project.id ? 'project-pill active' : 'project-pill'} onClick={() => setProjectId(project.id)}><i style={{ background: project.background || '#165DFF' }}>{projectLabel(project)}</i><span>{project.name}</span></button>)}
|
||||||
|
</div>
|
||||||
|
<Button type="text" size="mini" shape="circle" aria-label="上一个项目" icon={<IconLeft />} onClick={() => cycleProject(-1)} />
|
||||||
|
<Button type="text" size="mini" shape="circle" aria-label="下一个项目" icon={<IconRight />} onClick={() => cycleProject(1)} />
|
||||||
|
<Button type="primary" size="mini" shape="circle" aria-label="新建项目" icon={<IconPlus />} onClick={() => setProjectModalOpen(true)} />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{error ? <Alert className="app-alert" type="error" content={error} closable onClose={() => setError('')} /> : null}
|
||||||
|
<main className="app-main"><Spin loading={loading} block>{visibleWorkspaces.length ? <Content view={view} title={title} workspaces={visibleWorkspaces} tasks={tasks} onEditTask={setTaskEditor} onLoadAI={loadAI} experts={experts} /> : <Empty description="还没有项目，点击右上方加号创建一个项目" />}</Spin></main>
|
||||||
|
|
||||||
|
<aside className="channel-rail" aria-label="项目子菜单">
|
||||||
|
{navItems.map((item) => <button key={item.id} title={item.label} className={view === item.id ? 'active' : ''} onClick={() => { setView(item.id); if (item.id === 'ai') void loadAI() }}>{item.icon}<span>{item.label}</span></button>)}
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<TaskEditor task={taskEditor} tags={visibleWorkspaces.flatMap((workspace) => workspace.tags.map((tag) => tag.name))} onClose={() => setTaskEditor(null)} onSave={async (draft) => {
|
||||||
|
if (!taskEditor) return
|
||||||
|
await updateTask(session, taskEditor.projectId, taskEditor.id, { title: draft.title, description: draft.summary, tag: draft.tag, completed: draft.completed })
|
||||||
|
await loadWorkspaces()
|
||||||
|
setTaskEditor(null)
|
||||||
|
}} />
|
||||||
|
<ProjectModal visible={projectModalOpen} onClose={() => setProjectModalOpen(false)} onSave={async (name) => {
|
||||||
|
const project = await createProject(session, { name, identifier: slugify(name) || `project-${Date.now().toString(36)}`, icon: 'folder', background: '#165DFF', description: '' })
|
||||||
|
setProjectModalOpen(false)
|
||||||
|
await loadWorkspaces()
|
||||||
|
setProjectId(project.id)
|
||||||
|
}} />
|
||||||
|
<ProfileModal user={user} visible={profileModalOpen} onClose={() => setProfileModalOpen(false)} onSave={async (input) => {
|
||||||
|
const nextUser = await updateCurrentUser(session, input)
|
||||||
|
setUser(nextUser)
|
||||||
|
persistSession({ ...session, user: nextUser })
|
||||||
|
setProfileModalOpen(false)
|
||||||
|
}} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function ActionModal({ action, workspace, onClose, onProject, onTask, onCron }: {
|
function Content({ view, title, workspaces, tasks, onEditTask, onLoadAI, experts }: { view: View; title: string; workspaces: Workspace[]; tasks: TaskWithProject[]; onEditTask: (task: TaskWithProject) => void; onLoadAI: () => void; experts: Expert[] }) {
|
||||||
action: Action
|
if (view === 'tasks' || view === 'overview') return <TaskBoard title={view === 'overview' ? '待办任务' : '工作计划'} subtitle={title} tasks={tasks} onEditTask={onEditTask} />
|
||||||
workspace: Workspace | null
|
if (view === 'inbox') return <InboxPanel title={title} workspaces={workspaces} />
|
||||||
onClose: () => void
|
if (view === 'documents') return <DocumentPanel title={title} workspaces={workspaces} />
|
||||||
onProject: (name: string) => Promise<void>
|
if (view === 'ai') return <AIPanel title={title} workspaces={workspaces} experts={experts} onLoad={onLoadAI} />
|
||||||
onTask: (title: string, tag: string) => Promise<void>
|
return <CronPanel title={title} workspaces={workspaces} />
|
||||||
onCron: (title: string, schedule: string) => Promise<void>
|
|
||||||
}) {
|
|
||||||
const [title, setTitle] = useState('')
|
|
||||||
const [tag, setTag] = useState('')
|
|
||||||
const [schedule, setSchedule] = useState('0 9 * * 1-5')
|
|
||||||
const [loading, setLoading] = useState(false)
|
|
||||||
useEffect(() => { if (action) { setTitle(''); setTag(''); setSchedule('0 9 * * 1-5') } }, [action])
|
|
||||||
const labels = action === 'project' ? ['新建项目', '项目名称'] : action === 'task' ? ['新建计划', '计划标题'] : ['新建计划任务', '任务名称']
|
|
||||||
return (
|
|
||||||
<Modal className="mini-modal" visible={Boolean(action)} title={labels[0]} onCancel={onClose} footer={null} unmountOnExit>
|
|
||||||
<div className="mini-form">
|
|
||||||
<label>{labels[1]}<Input autoFocus value={title} onChange={setTitle} /></label>
|
|
||||||
{action === 'task' ? <label>标签<Select value={tag || undefined} placeholder="可选" onChange={setTag}>{workspace?.tags.filter((item) => item.name !== 'all' && item.name !== '全部').map((item) => <Select.Option key={item.id} value={item.name}>{item.name}</Select.Option>)}</Select></label> : null}
|
|
||||||
{action === 'cron' ? <label>Cron 表达式<Input value={schedule} onChange={setSchedule} /></label> : null}
|
|
||||||
<Button type="primary" long loading={loading} disabled={!title.trim()} onClick={async () => { setLoading(true); try { if (action === 'project') await onProject(title.trim()); if (action === 'task') await onTask(title.trim(), tag); if (action === 'cron') await onCron(title.trim(), schedule.trim()); onClose() } catch (requestError) { Message.error(errorMessage(requestError)) } finally { setLoading(false) } }}>保存</Button>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function readStoredSession(): ApiSession | null {
|
function TaskBoard({ title, subtitle, tasks, onEditTask }: { title: string; subtitle: string; tasks: TaskWithProject[]; onEditTask: (task: TaskWithProject) => void }) {
|
||||||
try {
|
const [tag, setTag] = useState('全部')
|
||||||
const value = JSON.parse(localStorage.getItem('senlin-mini-session') || 'null') as ApiSession | null
|
const tags = [...new Set(tasks.map((task) => task.tag).filter(Boolean))]
|
||||||
return value?.baseUrl && value?.token ? value : null
|
const visible = tag === '全部' ? tasks : tasks.filter((task) => task.tag === tag)
|
||||||
} catch {
|
const pending = visible.filter((task) => !task.completed)
|
||||||
return null
|
const completed = visible.filter((task) => task.completed)
|
||||||
}
|
return <section className="content-page task-page">
|
||||||
|
<div className="content-heading"><div><Text type="secondary">{subtitle}</Text><Title heading={4}>{title}</Title></div><Tag color="arcoblue">{pending.length} 项待办</Tag></div>
|
||||||
|
<div className="tag-filter"><button className={tag === '全部' ? 'active' : ''} onClick={() => setTag('全部')}>全部</button>{tags.map((item) => <button key={item} className={tag === item ? 'active' : ''} onClick={() => setTag(item)}>{item}</button>)}</div>
|
||||||
|
<section className="task-section"><div className="section-label"><strong>待办任务</strong><span>{pending.length}</span></div><div className="task-list">{pending.map((task) => <TaskRow key={task.id} task={task} onClick={() => onEditTask(task)} />)}{!pending.length && <Empty description="当前没有待办任务" />}</div></section>
|
||||||
|
<section className="task-section completed-section"><div className="section-label"><strong>已完成</strong><span>{completed.length}</span></div><div className="task-list">{completed.map((task) => <TaskRow key={task.id} task={task} onClick={() => onEditTask(task)} />)}{!completed.length && <Empty description="尚未完成任何任务" />}</div></section>
|
||||||
|
</section>
|
||||||
}
|
}
|
||||||
|
|
||||||
function projectMark(project?: Project) {
|
function TaskRow({ task, onClick }: { task: TaskWithProject; onClick: () => void }) {
|
||||||
if (!project) return <IconFolder />
|
return <button className={`task-row ${task.completed ? 'done' : ''}`} onClick={onClick}><span className="task-check">{task.completed ? <IconCheckCircleFill /> : <IconCheckCircle />}</span><span className="task-copy"><strong>{task.title}</strong><small>{task.summary || '暂无任务说明'}</small></span><span className="task-meta"><Tag color={task.completed ? 'green' : 'arcoblue'}>{task.tag || task.projectName}</Tag><small>{formatDate(task.completedAt || task.createdAt)}</small></span></button>
|
||||||
if (project.icon && !['folder', 'project'].includes(project.icon)) return project.icon
|
|
||||||
const chars = Array.from(project.name.trim())
|
|
||||||
const chinese = chars.some((char) => /[\u3400-\u9fff]/.test(char))
|
|
||||||
return chars.slice(0, chinese ? 2 : 4).join('').toUpperCase()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function errorMessage(error: unknown) {
|
function InboxPanel({ title, workspaces }: { title: string; workspaces: Workspace[] }) {
|
||||||
if (error instanceof ApiError || error instanceof Error) return error.message
|
const items = workspaces.flatMap((workspace) => workspace.inbox.map((item) => ({ ...item, projectName: workspace.project.name })))
|
||||||
return '操作失败，请稍后重试'
|
return <Panel title="收集箱" subtitle={title}>{items.map((item) => <article className="detail-row" key={item.id}><IconEmail /><div><strong>{item.title}</strong><p>{item.summary || item.source}</p></div><Tag>{item.projectName}</Tag></article>)}{!items.length && <Empty description="收集箱为空" />}</Panel>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function DocumentPanel({ title, workspaces }: { title: string; workspaces: Workspace[] }) {
|
||||||
|
const documents = workspaces.flatMap((workspace) => workspace.documents.map((item) => ({ ...item, projectName: workspace.project.name })))
|
||||||
|
return <Panel title="笔记资料" subtitle={title}>{documents.map((item) => <article className="detail-row" key={item.id}><IconFile /><div><strong>{item.name}</strong><p>{item.extension || item.mimeType || item.kind} · 更新于 {formatDate(item.updatedAt)}</p></div><Tag>{item.projectName}</Tag></article>)}{!documents.length && <Empty description="暂无笔记或资料" />}</Panel>
|
||||||
|
}
|
||||||
|
|
||||||
|
function AIPanel({ title, workspaces, experts, onLoad }: { title: string; workspaces: Workspace[]; experts: Expert[]; onLoad: () => void }) {
|
||||||
|
useEffect(() => { onLoad() }, [onLoad])
|
||||||
|
const sessions = workspaces.flatMap((workspace) => workspace.aiSessions.map((item) => ({ ...item, projectName: workspace.project.name })))
|
||||||
|
return <Panel title="AI 会话" subtitle={title}><div className="expert-chips">{experts.slice(0, 6).map((expert) => <span key={expert.id}><i style={{ background: expert.color }}>{expert.emoji}</i>{expert.name}</span>)}</div>{sessions.map((item) => <article className="detail-row" key={item.id}><IconRobot /><div><strong>{item.title}</strong><p>{item.summary || 'AI 会话'}</p></div><Tag>{item.projectName}</Tag></article>)}{!sessions.length && <Empty description="暂无 AI 会话" />}</Panel>
|
||||||
|
}
|
||||||
|
|
||||||
|
function CronPanel({ title, workspaces }: { title: string; workspaces: Workspace[] }) {
|
||||||
|
const plans = workspaces.flatMap((workspace) => workspace.cronPlans.map((item) => ({ ...item, projectName: workspace.project.name })))
|
||||||
|
return <Panel title="周期计划" subtitle={title}>{plans.map((item) => <article className="detail-row" key={item.id}><IconClockCircle /><div><strong>{item.title}</strong><p>{item.schedule} · {item.enabled ? '已启用' : '已停用'}</p></div><Tag>{item.projectName}</Tag></article>)}{!plans.length && <Empty description="暂无周期计划" />}</Panel>
|
||||||
|
}
|
||||||
|
|
||||||
|
function Panel({ title, subtitle, children }: { title: string; subtitle: string; children: React.ReactNode }) { return <section className="content-page"><div className="content-heading"><div><Text type="secondary">{subtitle}</Text><Title heading={4}>{title}</Title></div></div><div className="detail-list">{children}</div></section> }
|
||||||
|
|
||||||
|
function ProfileMenu({ user, onProfile, onLogout }: { user: CurrentUser | null; onProfile: () => void; onLogout: () => void }) {
|
||||||
|
const menu = <Menu><Menu.Item key="profile" onClick={onProfile}>修改资料</Menu.Item><Menu.Item key="logout" onClick={onLogout}>退出登录</Menu.Item></Menu>
|
||||||
|
return <Dropdown droplist={menu} position="br" trigger="click"><button className="profile-trigger"><Avatar size={28}>{user?.displayName.slice(0, 1) || <IconUser />}</Avatar><span>{user?.displayName || '用户'}</span><IconDown /></button></Dropdown>
|
||||||
|
}
|
||||||
|
|
||||||
|
function TaskEditor({ task, tags, onClose, onSave }: { task: TaskWithProject | null; tags: string[]; onClose: () => void; onSave: (draft: { title: string; summary: string; tag: string; completed: boolean }) => Promise<void> }) {
|
||||||
|
const [title, setTitle] = useState(''); const [summary, setSummary] = useState(''); const [tag, setTag] = useState(''); const [completed, setCompleted] = useState(false); const [saving, setSaving] = useState(false)
|
||||||
|
useEffect(() => { if (task) { setTitle(task.title); setSummary(task.summary); setTag(task.tag); setCompleted(task.completed) } }, [task])
|
||||||
|
return <Modal title="编辑任务" visible={Boolean(task)} onCancel={onClose} confirmLoading={saving} onOk={async () => { if (!title.trim()) return; setSaving(true); try { await onSave({ title: title.trim(), summary: summary.trim(), tag, completed }) } finally { setSaving(false) } }}><Form layout="vertical"><Form.Item label="标题" required><Input value={title} onChange={setTitle} /></Form.Item><Form.Item label="说明"><Input.TextArea value={summary} onChange={setSummary} autoSize={{ minRows: 3, maxRows: 6 }} /></Form.Item><Form.Item label="标签"><Select value={tag || undefined} allowClear onChange={(value) => setTag(value ?? '')}>{[...new Set(tags.filter(Boolean))].map((item) => <Select.Option key={item} value={item}>{item}</Select.Option>)}</Select></Form.Item><Form.Item label="完成状态"><Switch checked={completed} checkedText="已完成" uncheckedText="待办" onChange={setCompleted} /></Form.Item></Form></Modal>
|
||||||
|
}
|
||||||
|
|
||||||
|
function ProjectModal({ visible, onClose, onSave }: { visible: boolean; onClose: () => void; onSave: (name: string) => Promise<void> }) {
|
||||||
|
const [name, setName] = useState(''); const [saving, setSaving] = useState(false)
|
||||||
|
return <Modal title="新建项目" visible={visible} onCancel={onClose} confirmLoading={saving} onOk={async () => { if (!name.trim()) return; setSaving(true); try { await onSave(name.trim()); setName('') } finally { setSaving(false) } }}><Input autoFocus placeholder="项目名称" value={name} onChange={setName} /></Modal>
|
||||||
|
}
|
||||||
|
|
||||||
|
function ProfileModal({ user, visible, onClose, onSave }: { user: CurrentUser | null; visible: boolean; onClose: () => void; onSave: (input: { displayName: string; currentPassword?: string; newPassword?: string }) => Promise<void> }) {
|
||||||
|
const [displayName, setDisplayName] = useState(user?.displayName ?? ''); const [currentPassword, setCurrentPassword] = useState(''); const [newPassword, setNewPassword] = useState(''); const [saving, setSaving] = useState(false)
|
||||||
|
useEffect(() => setDisplayName(user?.displayName ?? ''), [user])
|
||||||
|
return <Modal title="修改资料" visible={visible} onCancel={onClose} confirmLoading={saving} onOk={async () => { setSaving(true); try { await onSave({ displayName, currentPassword: currentPassword || undefined, newPassword: newPassword || undefined }); setCurrentPassword(''); setNewPassword('') } finally { setSaving(false) } }}><Form layout="vertical"><Form.Item label="名称" required><Input value={displayName} onChange={setDisplayName} /></Form.Item><Form.Item label="邮箱"><Input disabled value={user?.email} /></Form.Item><Form.Item label="当前密码"><Input.Password value={currentPassword} onChange={setCurrentPassword} placeholder="修改密码时必填" /></Form.Item><Form.Item label="新密码"><Input.Password value={newPassword} onChange={setNewPassword} placeholder="不修改可留空" /></Form.Item></Form></Modal>
|
||||||
|
}
|
||||||
|
|
||||||
|
function Login({ onLogin }: { onLogin: (session: ApiSession & { user: CurrentUser }) => void }) {
|
||||||
|
const [server, setServer] = useState('http://localhost:9150'); const [email, setEmail] = useState('demo@senlin.ai'); const [password, setPassword] = useState('password123'); const [loading, setLoading] = useState(false); const [error, setError] = useState('')
|
||||||
|
return <div className="login-page"><form className="login-card" onSubmit={(event) => { event.preventDefault(); void submit() }}><img src="/senlinai-icon.svg" alt="" /><Title heading={3}>森林AI App</Title><Text type="secondary">连接你的私有工作台</Text><label>服务器地址<Input value={server} onChange={setServer} /></label><label>邮箱<Input value={email} onChange={setEmail} /></label><label>密码<Input.Password value={password} onChange={setPassword} /></label>{error && <Alert type="error" content={error} />}<Button type="primary" htmlType="submit" long loading={loading}>登录工作台</Button></form></div>
|
||||||
|
async function submit() { setLoading(true); setError(''); try { onLogin(await login(server, email.trim(), password)) } catch (requestError) { setError(errorMessage(requestError)) } finally { setLoading(false) } }
|
||||||
|
}
|
||||||
|
|
||||||
|
function readStoredSession(): SavedSession | null { try { const value = JSON.parse(localStorage.getItem(SESSION_KEY) || localStorage.getItem('senlin-mini-session') || 'null') as SavedSession | null; if (!value?.baseUrl || !value.token) return null; setApiBaseUrl(value.baseUrl); return value } catch { return null } }
|
||||||
|
function persistSession(session: SavedSession) { localStorage.setItem(SESSION_KEY, JSON.stringify(session)) }
|
||||||
|
function projectLabel(project: Project) { if (project.icon && !['folder', 'project'].includes(project.icon)) return Array.from(project.icon).slice(0, 2).join(''); return Array.from(project.name.trim()).slice(0, 2).join('').toUpperCase() || <IconFolder /> }
|
||||||
|
function formatDate(value: string) { const date = new Date(value); return Number.isNaN(date.getTime()) ? value : `${date.getMonth() + 1}/${date.getDate()}` }
|
||||||
|
function slugify(value: string) { return value.toLowerCase().trim().replace(/[^a-z0-9\u4e00-\u9fa5]+/g, '-').replace(/^-|-$/g, '') }
|
||||||
|
function errorMessage(error: unknown) { return error instanceof ApiError || error instanceof Error ? error.message : '操作失败，请稍后重试' }
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
export type ApiSession = { baseUrl: string; token: string }
|
export type ApiSession = { baseUrl: string; token: string }
|
||||||
|
|
||||||
|
export type CurrentUser = { email: string; displayName: string }
|
||||||
|
|
||||||
export type Project = {
|
export type Project = {
|
||||||
id: string
|
id: string
|
||||||
name: string
|
name: string
|
||||||
@@ -9,6 +11,17 @@ export type Project = {
|
|||||||
description: string
|
description: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type WorkspaceChannel = {
|
||||||
|
id: string
|
||||||
|
projectId: string
|
||||||
|
type: string
|
||||||
|
title: string
|
||||||
|
icon: string
|
||||||
|
count: number
|
||||||
|
url: string
|
||||||
|
sortOrder: number
|
||||||
|
}
|
||||||
|
|
||||||
export type WorkspaceTask = {
|
export type WorkspaceTask = {
|
||||||
id: string
|
id: string
|
||||||
projectId: string
|
projectId: string
|
||||||
@@ -23,57 +36,27 @@ export type WorkspaceTask = {
|
|||||||
tag: string
|
tag: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export type WorkspaceDocument = {
|
export type WorkspaceDocument = { id: string; projectId: string; kind: string; name: string; extension: string; mimeType: string; updatedAt: string }
|
||||||
id: string
|
export type WorkspaceAISession = { id: string; projectId: string; title: string; summary: string; updatedAt: string; references: string[] }
|
||||||
projectId: string
|
export type WorkspaceInbox = { id: string; projectId: string; source: string; title: string; summary: string; status: string; tag: string; time: string }
|
||||||
kind: string
|
export type WorkspaceCronPlan = { id: string; projectId: string; title: string; schedule: string; nextRun: string | null; enabled: boolean; lastResult: string; owner: string }
|
||||||
name: string
|
|
||||||
extension: string
|
|
||||||
mimeType: string
|
|
||||||
updatedAt: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CronPlan = {
|
|
||||||
id: string
|
|
||||||
projectId: string
|
|
||||||
title: string
|
|
||||||
schedule: string
|
|
||||||
nextRun: string | null
|
|
||||||
enabled: boolean
|
|
||||||
lastResult: string
|
|
||||||
owner: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type Workspace = {
|
export type Workspace = {
|
||||||
project: Project & { initials: string; unreadCount: number }
|
project: Project & { initials: string; unreadCount: number }
|
||||||
|
channels: WorkspaceChannel[]
|
||||||
tags: Array<{ id: string; name: string }>
|
tags: Array<{ id: string; name: string }>
|
||||||
|
recentSessions: WorkspaceAISession[]
|
||||||
|
inbox: WorkspaceInbox[]
|
||||||
tasks: WorkspaceTask[]
|
tasks: WorkspaceTask[]
|
||||||
|
aiSessions: WorkspaceAISession[]
|
||||||
documents: WorkspaceDocument[]
|
documents: WorkspaceDocument[]
|
||||||
aiSessions: Array<{ id: string; projectId: string; title: string; summary: string; updatedAt: string; references: string[] }>
|
cronPlans: WorkspaceCronPlan[]
|
||||||
cronPlans: CronPlan[]
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type Expert = {
|
export type Expert = { id: string; slug: string; category: string; categoryName: string; name: string; description: string; emoji: string; color: string }
|
||||||
id: string
|
export type AISession = { id: string; projectId: string; title: string; context: string; status: string; expert: Expert | null; createdAt: string; updatedAt: string }
|
||||||
slug: string
|
export type CreateTaskInput = { title: string; description?: string; status?: string; dueAt?: string; tag?: string }
|
||||||
category: string
|
export type UpdateTaskInput = { title: string; description?: string; status?: string; completed: boolean; nextProjectId?: string; tag?: string }
|
||||||
categoryName: string
|
|
||||||
name: string
|
|
||||||
description: string
|
|
||||||
emoji: string
|
|
||||||
color: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type AISession = {
|
|
||||||
id: string
|
|
||||||
projectId: string
|
|
||||||
title: string
|
|
||||||
context: string
|
|
||||||
status: string
|
|
||||||
expert: Expert | null
|
|
||||||
createdAt: string
|
|
||||||
updatedAt: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export class ApiError extends Error {
|
export class ApiError extends Error {
|
||||||
constructor(public status: number, public code: string, message: string) {
|
constructor(public status: number, public code: string, message: string) {
|
||||||
@@ -84,131 +67,101 @@ export class ApiError extends Error {
|
|||||||
|
|
||||||
let baseUrl = normalizeBaseUrl(import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:9150')
|
let baseUrl = normalizeBaseUrl(import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:9150')
|
||||||
|
|
||||||
export function configureApi(value: string) {
|
export function setApiBaseUrl(value: string) { baseUrl = normalizeBaseUrl(value) }
|
||||||
baseUrl = normalizeBaseUrl(value)
|
export function getApiBaseUrl() { return baseUrl }
|
||||||
|
|
||||||
|
export async function login(server: string, email: string, password: string): Promise<ApiSession & { user: CurrentUser }> {
|
||||||
|
setApiBaseUrl(server)
|
||||||
|
const response = await apiRequest<{ token: string; user: CurrentUser }>('/api/v1/auth/login', { method: 'POST', body: { email, password } })
|
||||||
|
return { baseUrl, token: response.token, user: response.user }
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function login(server: string, email: string, password: string): Promise<ApiSession> {
|
export function getCurrentUser(session: ApiSession) {
|
||||||
configureApi(server)
|
useSessionBase(session)
|
||||||
const response = await request<{ token: string }>('/api/v1/auth/login', { method: 'POST', body: { email, password } })
|
return apiRequest<CurrentUser>('/api/v1/auth/me', { token: session.token })
|
||||||
return { baseUrl, token: response.token }
|
}
|
||||||
|
|
||||||
|
export function updateCurrentUser(session: ApiSession, input: { displayName: string; currentPassword?: string; newPassword?: string }) {
|
||||||
|
useSessionBase(session)
|
||||||
|
return apiRequest<CurrentUser>('/api/v1/auth/me', { method: 'PATCH', token: session.token, body: input })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchProjects(session: ApiSession) {
|
||||||
|
useSessionBase(session)
|
||||||
|
return apiRequest<Project[]>('/api/v1/projects', { token: session.token })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchProjectWorkspace(session: ApiSession, projectId: string) {
|
||||||
|
useSessionBase(session)
|
||||||
|
return apiRequest<Workspace>(`/api/v1/projects/${projectId}/workspace`, { token: session.token })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createProject(session: ApiSession, input: Pick<Project, 'name' | 'identifier' | 'icon' | 'background' | 'description'>) {
|
||||||
|
useSessionBase(session)
|
||||||
|
return apiRequest<Project>('/api/v1/projects', { method: 'POST', token: session.token, body: input })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createTask(session: ApiSession, projectId: string, input: CreateTaskInput) {
|
||||||
|
useSessionBase(session)
|
||||||
|
return apiRequest(`/api/v1/projects/${projectId}/tasks`, { method: 'POST', token: session.token, body: input })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateTask(session: ApiSession, projectId: string, taskId: string, input: UpdateTaskInput) {
|
||||||
|
useSessionBase(session)
|
||||||
|
return apiRequest(`/api/v1/projects/${projectId}/tasks/${taskId}`, { method: 'PATCH', token: session.token, body: input })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function listAIExperts(session: ApiSession) {
|
||||||
|
useSessionBase(session)
|
||||||
|
return apiRequest<Expert[]>('/api/v1/ai-experts', { token: session.token })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function listAISessions(session: ApiSession, projectId: string) {
|
||||||
|
useSessionBase(session)
|
||||||
|
return apiRequest<AISession[]>(`/api/v1/projects/${projectId}/ai-sessions`, { token: session.token })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createAISession(session: ApiSession, projectId: string, input: { title: string; context: string; expertId?: string }) {
|
||||||
|
useSessionBase(session)
|
||||||
|
return apiRequest<AISession>(`/api/v1/projects/${projectId}/ai-sessions`, { method: 'POST', token: session.token, body: input })
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function checkServerConnection(server: string, signal?: AbortSignal) {
|
export async function checkServerConnection(server: string, signal?: AbortSignal) {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${normalizeBaseUrl(server)}/api/v1/status`, { signal })
|
const response = await fetch(`${normalizeBaseUrl(server)}/api/v1/status`, { signal })
|
||||||
if (!response.ok) return false
|
return response.ok
|
||||||
const payload = await response.json() as { timestamp?: unknown }
|
|
||||||
return typeof payload.timestamp === 'string'
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error instanceof DOMException && error.name === 'AbortError') throw error
|
if (error instanceof DOMException && error.name === 'AbortError') throw error
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchProjects(session: ApiSession) {
|
type RequestOptions = { method?: string; token?: string; body?: unknown; responseType?: 'void'; signal?: AbortSignal }
|
||||||
useSessionBase(session)
|
|
||||||
return request<Project[]>('/api/v1/projects', { token: session.token })
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchWorkspace(session: ApiSession, projectId: string) {
|
export async function apiRequest<T>(path: string, options: RequestOptions = {}): Promise<T> {
|
||||||
useSessionBase(session)
|
const isFormData = typeof FormData !== 'undefined' && options.body instanceof FormData
|
||||||
return request<Workspace>(`/api/v1/projects/${projectId}/workspace`, { token: session.token })
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createProject(session: ApiSession, name: string) {
|
|
||||||
useSessionBase(session)
|
|
||||||
const identifier = `${slugify(name) || 'project'}-${Date.now().toString(36)}`
|
|
||||||
return request<Project>('/api/v1/projects', {
|
|
||||||
method: 'POST', token: session.token,
|
|
||||||
body: { name, identifier, icon: 'folder', background: '#165DFF', description: '' },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createTask(session: ApiSession, projectId: string, title: string, tag?: string) {
|
|
||||||
useSessionBase(session)
|
|
||||||
return request(`/api/v1/projects/${projectId}/tasks`, {
|
|
||||||
method: 'POST', token: session.token, body: { title, description: '', status: 'open', tag },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateTask(session: ApiSession, projectId: string, task: WorkspaceTask) {
|
|
||||||
useSessionBase(session)
|
|
||||||
return request(`/api/v1/projects/${projectId}/tasks/${task.id}`, {
|
|
||||||
method: 'PATCH', token: session.token,
|
|
||||||
body: { title: task.title, description: task.summary, completed: !task.completed, tag: task.tag },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function uploadSource(session: ApiSession, projectId: string, file: File) {
|
|
||||||
useSessionBase(session)
|
|
||||||
const body = new FormData()
|
|
||||||
body.append('file', file)
|
|
||||||
body.append('title', file.name)
|
|
||||||
return request(`/api/v1/projects/${projectId}/sources`, { method: 'POST', token: session.token, body })
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createCron(session: ApiSession, projectId: string, title: string, schedule: string) {
|
|
||||||
useSessionBase(session)
|
|
||||||
return request(`/api/v1/projects/${projectId}/cron-plans`, {
|
|
||||||
method: 'POST', token: session.token, body: { title, schedule, enabled: true },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchExperts(session: ApiSession) {
|
|
||||||
useSessionBase(session)
|
|
||||||
return request<Expert[]>('/api/v1/ai-experts', { token: session.token })
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchAISessions(session: ApiSession, projectId: string) {
|
|
||||||
useSessionBase(session)
|
|
||||||
return request<AISession[]>(`/api/v1/projects/${projectId}/ai-sessions`, { token: session.token })
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createAISession(session: ApiSession, projectId: string, expertId: string, context: string) {
|
|
||||||
useSessionBase(session)
|
|
||||||
return request<AISession>(`/api/v1/projects/${projectId}/ai-sessions`, {
|
|
||||||
method: 'POST', token: session.token,
|
|
||||||
body: { title: Array.from(context).slice(0, 36).join(''), context, expertId },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
type RequestOptions = { method?: string; token?: string; body?: unknown; signal?: AbortSignal }
|
|
||||||
|
|
||||||
async function request<T>(path: string, options: RequestOptions = {}): Promise<T> {
|
|
||||||
const isForm = options.body instanceof FormData
|
|
||||||
let response: Response
|
let response: Response
|
||||||
try {
|
try {
|
||||||
response = await fetch(`${baseUrl}${path}`, {
|
response = await fetch(`${baseUrl}${path}`, {
|
||||||
method: options.method ?? 'GET',
|
method: options.method ?? 'GET',
|
||||||
headers: {
|
headers: { ...(options.body !== undefined && !isFormData ? { 'Content-Type': 'application/json' } : {}), ...(options.token ? { Authorization: `Bearer ${options.token}` } : {}) },
|
||||||
...(!isForm && options.body !== undefined ? { 'Content-Type': 'application/json' } : {}),
|
body: options.body === undefined ? undefined : isFormData ? options.body as FormData : JSON.stringify(options.body),
|
||||||
...(options.token ? { Authorization: `Bearer ${options.token}` } : {}),
|
|
||||||
},
|
|
||||||
body: options.body === undefined ? undefined : isForm ? options.body as FormData : JSON.stringify(options.body),
|
|
||||||
signal: options.signal,
|
signal: options.signal,
|
||||||
})
|
})
|
||||||
} catch {
|
} catch {
|
||||||
throw new ApiError(0, 'network_error', '无法连接服务器，请检查地址和网络')
|
throw new ApiError(0, 'network_error', '无法连接服务器，请检查地址和网络后重试')
|
||||||
}
|
}
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
const payload = await response.json().catch(() => null) as { error?: { code?: string; message?: string } } | null
|
const payload = await response.json().catch(() => null) as { error?: { code?: string; message?: string } } | null
|
||||||
throw new ApiError(response.status, payload?.error?.code ?? 'request_failed', payload?.error?.message ?? '请求失败，请稍后重试')
|
throw new ApiError(response.status, payload?.error?.code ?? fallbackCode(response.status), payload?.error?.message ?? fallbackMessage(response.status))
|
||||||
}
|
}
|
||||||
if (response.status === 204) return undefined as T
|
if (response.status === 204 || options.responseType === 'void') return undefined as T
|
||||||
return response.json() as Promise<T>
|
const text = await response.text()
|
||||||
|
if (!text.trim()) throw new ApiError(response.status, 'invalid_response', '服务器返回了无法识别的数据')
|
||||||
|
try { return JSON.parse(text) as T } catch { throw new ApiError(response.status, 'invalid_response', '服务器返回了无法识别的数据') }
|
||||||
}
|
}
|
||||||
|
|
||||||
function useSessionBase(session: ApiSession) {
|
function useSessionBase(session: ApiSession) { baseUrl = normalizeBaseUrl(session.baseUrl) }
|
||||||
baseUrl = normalizeBaseUrl(session.baseUrl)
|
function normalizeBaseUrl(value: string) { const normalized = value.trim().replace(/\/+$/, ''); return !normalized || /^https?:\/\//i.test(normalized) ? normalized : `http://${normalized}` }
|
||||||
}
|
function fallbackCode(status: number) { return status === 401 ? 'unauthorized' : status === 403 ? 'forbidden' : status === 404 ? 'not_found' : status === 409 ? 'conflict' : status >= 500 ? 'internal_error' : 'request_failed' }
|
||||||
|
function fallbackMessage(status: number) { return status === 401 ? '登录已失效，请重新登录' : status === 403 ? '没有权限执行此操作' : status === 404 ? '请求的内容不存在' : status === 409 ? '操作冲突，请刷新后重试' : status >= 500 ? '服务器暂时无法处理请求，请稍后重试' : '请求失败，请稍后重试' }
|
||||||
function normalizeBaseUrl(value: string) {
|
|
||||||
const normalized = value.trim().replace(/\/+$/, '')
|
|
||||||
if (!normalized || /^https?:\/\//i.test(normalized)) return normalized
|
|
||||||
return `http://${normalized}`
|
|
||||||
}
|
|
||||||
|
|
||||||
function slugify(value: string) {
|
|
||||||
return value.toLowerCase().trim().replace(/[^a-z0-9\u4e00-\u9fa5]+/g, '-').replace(/^-|-$/g, '')
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,235 +1,70 @@
|
|||||||
:root {
|
:root { font-family: Inter, "Microsoft YaHei", sans-serif; color: #1d2129; background: #f4f5f7; }
|
||||||
font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
||||||
color: #1d2129;
|
|
||||||
background: #e8edf4;
|
|
||||||
font-synthesis: none;
|
|
||||||
--blue: #165dff;
|
|
||||||
--line: #e5e8ef;
|
|
||||||
--muted: #86909c;
|
|
||||||
--panel: #fff;
|
|
||||||
--canvas: #f5f7fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
* { box-sizing: border-box; }
|
* { box-sizing: border-box; }
|
||||||
html, body, #root { width: 100%; min-width: 320px; height: 100%; margin: 0; }
|
body { margin: 0; min-width: 300px; min-height: 100vh; background: #f4f5f7; }
|
||||||
body { overflow: hidden; background: #e8edf4; }
|
button { font: inherit; }
|
||||||
button, input, textarea { font: inherit; }
|
|
||||||
button { color: inherit; }
|
|
||||||
|
|
||||||
.mini-shell {
|
.app-shell { --canvas: #f6f7f9; --surface: #fff; --line: #e5e6eb; --text: #1d2129; --muted: #86909c; --rail: #f2f3f5; display: grid; grid-template: 48px 46px minmax(0, 1fr) / minmax(0, 1fr) 58px; min-height: 100vh; color: var(--text); background: var(--canvas); overflow: hidden; }
|
||||||
width: 100%;
|
.app-shell.theme-dark { --canvas: #171a1f; --surface: #23272e; --line: #3a3f47; --text: #f2f3f5; --muted: #a9b0bb; --rail: #2b3038; color-scheme: dark; }
|
||||||
height: 100vh;
|
.app-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 0 12px 0 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
|
||||||
display: grid;
|
.app-brand { display: flex; align-items: center; gap: 7px; min-width: 0; height: 100%; font-weight: 700; letter-spacing: .1px; }
|
||||||
grid-template-rows: 44px 50px 58px minmax(0, 1fr) 28px;
|
.app-brand img { width: 23px; height: 23px; }
|
||||||
overflow: hidden;
|
.header-actions { display: flex; align-items: center; gap: 5px; }
|
||||||
background: var(--canvas);
|
.profile-trigger { display: inline-flex; align-items: center; gap: 6px; max-width: 144px; border: 0; padding: 4px; color: var(--text); background: transparent; border-radius: 8px; cursor: pointer; }
|
||||||
border: 0;
|
.profile-trigger:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
|
||||||
box-shadow: none;
|
.profile-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
|
||||||
}
|
.profile-trigger > svg { flex: 0 0 auto; color: var(--muted); font-size: 13px; }
|
||||||
|
|
||||||
.mini-header,
|
.project-strip { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 5px 9px; border-bottom: 1px solid var(--line); background: var(--surface); }
|
||||||
.project-switcher,
|
.project-scroller { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; flex: 1; }
|
||||||
.mini-nav,
|
.project-pill { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; max-width: 122px; min-height: 30px; padding: 4px 8px; border: 1px solid transparent; border-radius: 8px; color: #4e5969; background: transparent; cursor: pointer; }
|
||||||
.mini-footer {
|
.project-pill:hover, .project-pill.active { color: #165dff; background: #e8f3ff; border-color: #d3e7ff; }
|
||||||
background: rgba(255, 255, 255, 0.96);
|
.project-pill i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; color: #fff; font-style: normal; font-size: 9px; font-weight: 700; }
|
||||||
}
|
.project-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
|
||||||
|
|
||||||
.mini-header {
|
.app-alert { grid-column: 1 / 2; z-index: 2; margin: 8px 12px -46px; align-self: start; }
|
||||||
display: flex;
|
.app-main { grid-column: 1; grid-row: 3; min-width: 0; overflow: auto; padding: 18px 15px 24px; }
|
||||||
align-items: center;
|
.app-main > .arco-spin { min-height: 100%; }
|
||||||
justify-content: space-between;
|
.content-page { max-width: 650px; margin: 0 auto; }
|
||||||
padding: 0 10px 0 12px;
|
.content-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
|
||||||
border-bottom: 1px solid var(--line);
|
.content-heading .arco-typography { margin: 0; }
|
||||||
user-select: none;
|
.content-heading h4 { margin-top: 2px; font-size: 20px; }
|
||||||
}
|
.tag-filter { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 2px; }
|
||||||
|
.tag-filter button { flex: 0 0 auto; padding: 5px 10px; border: 0; border-radius: 999px; color: var(--muted); background: var(--surface); cursor: pointer; font-size: 12px; }
|
||||||
|
.tag-filter button.active { color: #fff; background: #165dff; }
|
||||||
|
.task-section { margin-bottom: 18px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
|
||||||
|
.completed-section { opacity: .82; }
|
||||||
|
.section-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 13px; }
|
||||||
|
.section-label span { display: grid; place-items: center; min-width: 21px; height: 21px; border-radius: 50%; color: #165dff; background: #e8f3ff; font-size: 11px; font-weight: 700; }
|
||||||
|
.task-list { display: grid; gap: 7px; }
|
||||||
|
.task-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 10px 8px; border: 1px solid transparent; border-radius: 9px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
|
||||||
|
.task-row:hover { border-color: #c9d7ee; background: #f7faff; }
|
||||||
|
.task-row.done .task-copy strong { color: var(--muted); text-decoration: line-through; }
|
||||||
|
.task-check { color: #165dff; font-size: 21px; line-height: 0; }
|
||||||
|
.task-row.done .task-check { color: #00b42a; }
|
||||||
|
.task-copy { display: grid; min-width: 0; gap: 3px; }
|
||||||
|
.task-copy strong, .task-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.task-copy strong { font-size: 13px; }
|
||||||
|
.task-copy small { color: var(--muted); font-size: 11px; }
|
||||||
|
.task-meta { display: grid; justify-items: end; gap: 4px; }
|
||||||
|
.task-meta small { color: var(--muted); font-size: 10px; }
|
||||||
|
|
||||||
.mini-brand,
|
.channel-rail { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 6px; border-left: 1px solid var(--line); background: var(--rail); overflow-y: auto; }
|
||||||
.project-trigger,
|
.channel-rail button { display: grid; place-items: center; width: 42px; min-height: 43px; gap: 2px; border: 0; border-radius: 10px; color: #6b7077; background: transparent; cursor: pointer; }
|
||||||
.mini-footer,
|
.channel-rail button:hover { color: #165dff; background: #e8f3ff; }
|
||||||
.section-title,
|
.channel-rail button.active { color: #165dff; background: #dbeeff; box-shadow: inset 0 0 0 1px #c9e2ff; }
|
||||||
.page-title,
|
.channel-rail svg { font-size: 20px; }
|
||||||
.selected-expert,
|
.channel-rail span { font-size: 9px; line-height: 1; }
|
||||||
.session-list > div,
|
|
||||||
.settings-card > div,
|
|
||||||
.version-card {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mini-brand { gap: 7px; font-weight: 800; }
|
.detail-list { display: grid; gap: 8px; }
|
||||||
.mini-brand img { width: 25px; height: 25px; }
|
.detail-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
|
||||||
.mini-brand .arco-tag { margin-left: 2px; }
|
.detail-row > svg { color: #165dff; font-size: 18px; }
|
||||||
|
.detail-row div { min-width: 0; }
|
||||||
|
.detail-row strong, .detail-row p { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.detail-row strong { font-size: 13px; }.detail-row p { margin-top: 3px; color: var(--muted); font-size: 11px; }
|
||||||
|
.expert-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
|
||||||
|
.expert-chips span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 11px; }.expert-chips i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-style: normal; }
|
||||||
|
|
||||||
.project-switcher {
|
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; background: #edf2f9; }.login-card { display: grid; width: min(100%, 360px); gap: 12px; padding: 28px; border: 1px solid #e5e6eb; border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(31, 35, 41, .12); }.login-card > img { width: 34px; }.login-card .arco-typography { margin: 0; }.login-card label { display: grid; gap: 5px; color: #4e5969; font-size: 12px; }
|
||||||
display: grid;
|
.theme-dark .project-strip, .theme-dark .app-header, .theme-dark .task-section, .theme-dark .detail-row, .theme-dark .tag-filter button { color: var(--text); background: var(--surface); }.theme-dark .project-pill { color: var(--muted); }.theme-dark .project-pill.active, .theme-dark .channel-rail button.active { color: #8ac7ff; background: #1d4d77; }.theme-dark .task-row:hover { background: #293847; border-color: #477da7; }.theme-dark .section-label span { color: #8ac7ff; background: #1d4d77; }
|
||||||
grid-template-columns: minmax(0, 1fr) 32px 32px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 6px 8px;
|
|
||||||
border-bottom: 1px solid var(--line);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-switcher > .arco-select { width: 100%; }
|
@media (max-width: 360px) { .profile-trigger > span { display: none; }.project-pill { max-width: 90px; }.app-main { padding: 13px 9px 20px; }.task-meta .arco-tag { max-width: 64px; overflow: hidden; }.content-heading h4 { font-size: 18px; } }
|
||||||
.project-trigger {
|
|
||||||
width: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
height: 36px;
|
|
||||||
gap: 8px;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 9px;
|
|
||||||
background: transparent;
|
|
||||||
padding: 3px 6px;
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.project-trigger:hover { background: #f2f5fa; }
|
|
||||||
.project-trigger > span:nth-of-type(1) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
|
|
||||||
.project-trigger small { margin-left: auto; color: var(--muted); font-size: 10px; }
|
|
||||||
|
|
||||||
.mini-nav {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
||||||
border-bottom: 1px solid var(--line);
|
|
||||||
}
|
|
||||||
.mini-nav button {
|
|
||||||
position: relative;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
align-content: center;
|
|
||||||
gap: 2px;
|
|
||||||
border: 0;
|
|
||||||
background: transparent;
|
|
||||||
color: #6b778c;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
.mini-nav button::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; border-radius: 99px; background: transparent; }
|
|
||||||
.mini-nav svg { font-size: 18px; }
|
|
||||||
.mini-nav button:hover,
|
|
||||||
.mini-nav button.active { color: var(--blue); background: linear-gradient(180deg, transparent, #f3f7ff); }
|
|
||||||
.mini-nav button.active::after { background: var(--blue); }
|
|
||||||
|
|
||||||
.mini-alert { position: fixed; z-index: 30; top: 102px; left: 50%; width: min(388px, calc(100% - 24px)); transform: translateX(-50%); }
|
|
||||||
.mini-content { min-height: 0; overflow: hidden; }
|
|
||||||
.mini-content > .arco-spin { width: 100%; height: 100%; }
|
|
||||||
.mini-content > .arco-spin > .arco-spin-children { height: 100%; }
|
|
||||||
.mini-page { height: 100%; overflow-x: hidden; overflow-y: auto; padding: 14px 14px 24px; scrollbar-width: thin; scrollbar-color: #c9cdd4 transparent; }
|
|
||||||
|
|
||||||
.mini-footer { justify-content: space-between; padding: 0 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
|
|
||||||
.mini-footer span { display: inline-flex; align-items: center; gap: 5px; }
|
|
||||||
.mini-footer i { width: 6px; height: 6px; border-radius: 50%; background: #00b42a; box-shadow: 0 0 0 2px #e8ffea; }
|
|
||||||
.mini-footer button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; }
|
|
||||||
|
|
||||||
.page-intro {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 16px;
|
|
||||||
background: linear-gradient(135deg, #165dff, #6aa1ff);
|
|
||||||
color: white;
|
|
||||||
padding: 18px;
|
|
||||||
box-shadow: 0 12px 28px rgba(22, 93, 255, 0.2);
|
|
||||||
}
|
|
||||||
.page-intro::after { content: ""; position: absolute; width: 130px; height: 130px; right: -45px; top: -52px; border: 24px solid rgba(255,255,255,.1); border-radius: 50%; }
|
|
||||||
.page-intro .arco-typography { color: rgba(255,255,255,.78); }
|
|
||||||
.page-intro h4 { margin: 4px 0 5px; color: white; }
|
|
||||||
.page-intro p { position: relative; z-index: 1; margin: 0; color: rgba(255,255,255,.86); font-size: 12px; line-height: 1.6; }
|
|
||||||
|
|
||||||
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
|
|
||||||
.metric { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 12px; }
|
|
||||||
.metric strong { font-size: 22px; }
|
|
||||||
.metric span { color: var(--muted); font-size: 11px; }
|
|
||||||
.metric.blue strong { color: #165dff; }.metric.green strong { color: #00b42a; }.metric.purple strong { color: #722ed1; }.metric.orange strong { color: #ff7d00; }
|
|
||||||
|
|
||||||
.section-title { justify-content: space-between; gap: 8px; margin: 18px 2px 9px; font-size: 13px; }
|
|
||||||
.quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
|
|
||||||
.quick-actions button { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 12px; text-align: left; cursor: pointer; }
|
|
||||||
.quick-actions button:hover { border-color: #94bfff; box-shadow: 0 5px 16px rgba(22,93,255,.1); }
|
|
||||||
.quick-actions svg { color: var(--blue); font-size: 20px; }
|
|
||||||
.quick-actions span, .compact-list span, .session-list span, .settings-card span { min-width: 0; display: grid; gap: 2px; }
|
|
||||||
.quick-actions small, .compact-list small, .session-list small, .settings-card small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
|
||||||
|
|
||||||
.compact-list { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; }
|
|
||||||
.compact-list > div { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 9px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #f0f1f4; }
|
|
||||||
.compact-list > div:last-child { border-bottom: 0; }
|
|
||||||
.compact-list svg { color: var(--blue); }
|
|
||||||
|
|
||||||
.page-title { justify-content: space-between; gap: 10px; margin-bottom: 13px; }
|
|
||||||
.page-title h5 { margin: 0 0 2px; }
|
|
||||||
.page-title .arco-typography { font-size: 11px; }
|
|
||||||
.filter-strip { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0 12px; padding-bottom: 2px; scrollbar-width: none; }
|
|
||||||
.filter-strip button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); padding: 4px 10px; cursor: pointer; font-size: 11px; }
|
|
||||||
.filter-strip button.active { border-color: #8eb7ff; background: #edf3ff; color: var(--blue); }
|
|
||||||
|
|
||||||
.sticky-list, .note-grid { display: grid; gap: 9px; }
|
|
||||||
.task-note { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; border: 1px solid #eadfac; border-radius: 4px 13px 13px 13px; background: #fffbea; padding: 13px 12px 12px 9px; box-shadow: 0 4px 14px rgba(78, 89, 105, .08); }
|
|
||||||
.task-note:nth-child(3n+2) { border-color: #cde5d7; background: #f0fff5; }
|
|
||||||
.task-note:nth-child(3n+3) { border-color: #d7def4; background: #f2f5ff; }
|
|
||||||
.task-note.completed { opacity: .64; }
|
|
||||||
.task-note.completed strong { text-decoration: line-through; }
|
|
||||||
.task-check { width: 27px; height: 27px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.8); color: #8b9aab; cursor: pointer; }
|
|
||||||
.task-note:not(.completed) .task-check:hover, .task-note.completed .task-check { color: #00b42a; }
|
|
||||||
.task-note strong { font-size: 13px; }
|
|
||||||
.task-note p { margin: 5px 0; color: #4e5969; font-size: 11px; line-height: 1.5; }
|
|
||||||
.task-note span { color: var(--muted); font-size: 10px; }
|
|
||||||
|
|
||||||
.hidden-file { display: none; }
|
|
||||||
.note-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
|
||||||
.source-note { min-height: 135px; display: flex; flex-direction: column; border: 1px solid #eadfac; border-radius: 4px 14px 14px 14px; background: #fff9d8; padding: 13px; }
|
|
||||||
.source-note.tone-1 { background: #eaf8ff; border-color: #c7e6f5; }.source-note.tone-2 { background: #f3edff; border-color: #ded0f7; }.source-note.tone-3 { background: #edfff3; border-color: #caead4; }
|
|
||||||
.source-note svg { color: #ff9a2e; font-size: 18px; }
|
|
||||||
.source-note strong { margin-top: 9px; font-size: 12px; }
|
|
||||||
.source-note p { flex: 1; margin: 5px 0; color: #4e5969; font-size: 10px; }
|
|
||||||
.source-note span { color: var(--muted); font-size: 9px; }
|
|
||||||
|
|
||||||
.ai-view > .arco-input-wrapper { border-radius: 10px; }
|
|
||||||
.expert-strip { max-height: 210px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; overflow-y: auto; padding: 1px; }
|
|
||||||
.expert-strip button { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: white; padding: 8px; text-align: left; cursor: pointer; }
|
|
||||||
.expert-strip button.active { border-color: #75a8ff; background: #f2f6ff; box-shadow: 0 0 0 1px #c8dcff; }
|
|
||||||
.expert-strip i, .selected-expert i, .session-list i { display: grid; place-items: center; border-radius: 9px; color: white; font-style: normal; }
|
|
||||||
.expert-strip i { width: 34px; height: 34px; font-size: 17px; }
|
|
||||||
.expert-strip span { min-width: 0; display: grid; }
|
|
||||||
.expert-strip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
|
|
||||||
.expert-strip small { color: var(--muted); font-size: 9px; }
|
|
||||||
|
|
||||||
.mini-composer { display: grid; gap: 8px; margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; background: white; padding: 11px; box-shadow: 0 7px 22px rgba(29,33,41,.08); }
|
|
||||||
.selected-expert { min-height: 38px; gap: 9px; }
|
|
||||||
.selected-expert i { width: 36px; height: 36px; flex: 0 0 36px; }
|
|
||||||
.selected-expert span { min-width: 0; display: grid; }
|
|
||||||
.selected-expert b { font-size: 12px; }
|
|
||||||
.selected-expert small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
|
|
||||||
.mini-composer .arco-textarea-wrapper { border-radius: 9px; background: #f6f7f9; }
|
|
||||||
.session-list { display: grid; gap: 7px; }
|
|
||||||
.session-list > div { gap: 9px; border: 1px solid var(--line); border-radius: 10px; background: white; padding: 9px; }
|
|
||||||
.session-list i { width: 31px; height: 31px; }
|
|
||||||
|
|
||||||
.settings-card { display: grid; gap: 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 13px; background: white; padding: 13px; }
|
|
||||||
.settings-card > strong { font-size: 13px; }
|
|
||||||
.settings-card > div { gap: 9px; border-top: 1px solid #f0f1f4; padding-top: 9px; }
|
|
||||||
.settings-card svg { color: var(--blue); }
|
|
||||||
.settings-card p { margin: 0; color: #4e5969; font-size: 11px; line-height: 1.65; }
|
|
||||||
.version-card { grid-template-columns: 34px minmax(0,1fr); }
|
|
||||||
.version-card img { width: 34px; }
|
|
||||||
|
|
||||||
.mini-login { width: 100%; height: 100%; display: grid; place-items: center; overflow: auto; padding: 22px; background: linear-gradient(160deg, #edf4ff 0%, #e6ebf2 52%, #dce4ef 100%); }
|
|
||||||
.login-note { width: min(360px, 100%); display: grid; justify-items: stretch; gap: 13px; border: 1px solid rgba(255,255,255,.85); border-radius: 4px 22px 22px 22px; background: #fffbea; padding: 26px 22px 20px; box-shadow: 0 24px 60px rgba(29,33,41,.16); }
|
|
||||||
.login-note > img { width: 52px; }
|
|
||||||
.login-note h3 { margin: 0; }
|
|
||||||
.login-note label, .mini-form label { display: grid; gap: 5px; color: #4e5969; font-size: 11px; }
|
|
||||||
.login-note .arco-input-wrapper, .mini-form .arco-input-wrapper { border-radius: 9px; background: rgba(255,255,255,.82); }
|
|
||||||
.login-note > small { color: var(--muted); text-align: center; }
|
|
||||||
.mini-connection { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; margin-top: -5px; border: 1px solid #bedaff; border-radius: 9px; background: #f2f8ff; padding: 8px 10px; color: #165dff; font-size: 11px; }
|
|
||||||
.mini-connection > i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
|
|
||||||
.mini-connection > strong { font-weight: 600; }
|
|
||||||
.mini-connection > button { border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; font-size: 11px; }
|
|
||||||
.mini-connection.online { border-color: #7be188; background: #f0fff4; color: #168a2f; }
|
|
||||||
.mini-connection.offline { border-color: #f53f3f; background: #fff2f0; color: #d91d35; }
|
|
||||||
|
|
||||||
.mini-modal .arco-modal { width: min(380px, calc(100vw - 24px)); }
|
|
||||||
.mini-modal .arco-modal-content { border-radius: 15px; }
|
|
||||||
.mini-form { display: grid; gap: 13px; }
|
|
||||||
.mini-form .arco-select { width: 100%; }
|
|
||||||
|
|
||||||
@media (max-width: 359px) {
|
|
||||||
.mini-brand .arco-tag { display: none; }
|
|
||||||
.note-grid, .expert-strip { grid-template-columns: 1fr; }
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user