feat(web): add explore source configuration modals

2026-07-22 15:56:04 +08:00
parent 74775ed64f
commit 5d2f45ad83
3 changed files with 221 additions and 62 deletions
--- a/apps/web_v1/scripts/structure-check.mjs
+++ b/apps/web_v1/scripts/structure-check.mjs
@@ -130,7 +130,7 @@ for (const forbidden of ['DeepSeek V4.0 Flash', '给 DeepSeek 发送消息', 'Ic
 }

 const explorePageSource = readFileSync('src/pages/workspace-explore.tsx', 'utf8')
-for (const required of ['explore-source-card', 'explore-reader-layout', '同步数据源', '添加数据源', 'detectSource']) {
+for (const required of ['explore-source-card', 'explore-reader-layout', '同步数据源', '添加数据源', 'detectSource', 'explore-source-modal', 'openAddSource', 'openEditSource']) {
  if (!explorePageSource.includes(required)) failures.push(`workspace explore page must restore ${required}`)
 }

--- a/apps/web_v1/scripts/visual-check.mjs
+++ b/apps/web_v1/scripts/visual-check.mjs
@@ -200,6 +200,31 @@ await page.waitForTimeout(500)
 await page.screenshot({ path: 'test-results/workspace-explore-react-acro-light.png', fullPage: true })
 const workspaceExploreMetrics = await collectMetrics()

+await page.getByRole('button', { name: '添加数据源' }).click()
+await page.waitForSelector('.explore-source-modal')
+await page.waitForTimeout(250)
+await page.screenshot({ path: 'test-results/explore-add-source-modal.png', fullPage: true })
+const addSourceModalCheck = await page.evaluate(() => ({
+  title: document.querySelector('.explore-source-modal .arco-modal-title')?.textContent ?? '',
+  inputCount: document.querySelectorAll('.explore-source-modal input, .explore-source-modal textarea').length,
+}))
+await page.locator('.explore-source-modal input').first().fill('行业资讯')
+await page.locator('.explore-source-modal .arco-modal-footer .arco-btn-primary').click()
+const addedSourceVisible = await page.locator('.explore-source-card', { hasText: '行业资讯' }).count() === 1
+
+await page.locator('.explore-source-card').nth(1).hover()
+await page.getByRole('button', { name: '编辑手动收集' }).click()
+await page.waitForSelector('.explore-source-modal')
+await page.waitForTimeout(250)
+await page.screenshot({ path: 'test-results/explore-edit-source-modal.png', fullPage: true })
+const editSourceModalCheck = await page.evaluate(() => ({
+  title: document.querySelector('.explore-source-modal .arco-modal-title')?.textContent ?? '',
+  name: document.querySelector('.explore-source-modal input')?.value ?? '',
+}))
+await page.locator('.explore-source-modal input').first().fill('手动整理')
+await page.locator('.explore-source-modal .arco-modal-footer .arco-btn-primary').click()
+const editedSourceVisible = await page.locator('.explore-source-card', { hasText: '手动整理' }).count() === 1
+
 await page.locator('.project-button').first().click()
 await page.waitForTimeout(500)
 await page.screenshot({ path: 'test-results/project-react-acro-light.png', fullPage: true })
@@ -246,6 +271,10 @@ await server.close()
 console.log(JSON.stringify({
  workspaceMetrics,
  workspaceExploreMetrics,
+  addSourceModalCheck,
+  addedSourceVisible,
+  editSourceModalCheck,
+  editedSourceVisible,
  projectMetrics,
  channelSidebarHoverMetrics,
  stageHoverMetrics,
@@ -341,6 +370,14 @@ if (workspaceExploreMetrics.channelSidebar) failures.push(`expected workspace ex
 if (workspaceExploreMetrics.inspector) failures.push(`expected workspace explore to hide inspector, got ${JSON.stringify(workspaceExploreMetrics.inspector)}`)
 if (workspaceExploreMetrics.exploreSourceCardCount !== 4) failures.push(`expected four legacy explore source cards, got ${workspaceExploreMetrics.exploreSourceCardCount}`)
 if (!workspaceExploreMetrics.hasExploreReader) failures.push('expected legacy explore article reader to render')
+if (!addSourceModalCheck.title.includes('添加数据源') || addSourceModalCheck.inputCount < 3) {
+  failures.push(`expected add data source modal with fields, got ${JSON.stringify(addSourceModalCheck)}`)
+}
+if (!addedSourceVisible) failures.push('expected saved data source to appear in the source cards')
+if (!editSourceModalCheck.title.includes('编辑数据源') || editSourceModalCheck.name !== '手动收集') {
+  failures.push(`expected prefilled edit data source modal, got ${JSON.stringify(editSourceModalCheck)}`)
+}
+if (!editedSourceVisible) failures.push('expected edited data source name to update its card')
 if (!workspaceExploreMetrics.stage || !workspaceExploreMetrics.projectRail) {
  failures.push(`missing workspace explore layout regions: rail=${JSON.stringify(workspaceExploreMetrics.projectRail)}, stage=${JSON.stringify(workspaceExploreMetrics.stage)}`)
 } else if (Math.abs(workspaceExploreMetrics.stage.left - workspaceExploreMetrics.projectRail.right) > 1) {
--- a/apps/web_v1/src/pages/workspace-explore.tsx
+++ b/apps/web_v1/src/pages/workspace-explore.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
-import { Button, Card, Empty, Grid, Space, Typography } from '@arco-design/web-react'
+import { Alert, Button, Card, Empty, Grid, Input, Modal, Select, Space, Typography } from '@arco-design/web-react'
 import {
  IconBook,
  IconCheckCircle,
@@ -17,27 +17,50 @@ import type { InboxItem, Project, ProjectWorkspace } from './projects/project-ty

 const { Row, Col } = Grid
 const { Title, Text, Paragraph } = Typography
+const { TextArea } = Input

-type DataSourceID = 'all' | 'manual' | 'requirements' | 'architecture'
+type BuiltinDataSourceID = 'all' | 'manual' | 'requirements' | 'architecture'
+type DataSourceID = BuiltinDataSourceID | `custom:${number}`
+type DataSourceKind = 'manual' | 'link' | 'rss'

 type ExploreArticle = InboxItem & {
  project: Project
-  sourceID: DataSourceID
+  sourceID: BuiltinDataSourceID
 }

-type DataSourceCard = {
+type DataSourceConfig = {
  id: DataSourceID
  name: string
-  count: number
  icon: ReactNode
  color: string
+  kind: DataSourceKind
+  url: string
+  description: string
 }

-const SOURCE_META: Record<DataSourceID, { name: string; icon: ReactNode; color: string }> = {
-  all: { name: '全部', icon: <IconStorage />, color: 'blue' },
-  manual: { name: '手动收集', icon: <IconCompass />, color: 'green' },
-  requirements: { name: '需求文档', icon: <IconFile />, color: 'orange' },
-  architecture: { name: '架构讨论', icon: <IconBook />, color: 'purple' },
+type DataSourceCard = DataSourceConfig & {
+  count: number
+}
+
+type SourceDraft = {
+  name: string
+  kind: DataSourceKind
+  url: string
+  description: string
+}
+
+const INITIAL_SOURCES: DataSourceConfig[] = [
+  { id: 'all', name: '全部', icon: <IconStorage />, color: 'blue', kind: 'manual', url: '', description: '全部探索内容' },
+  { id: 'manual', name: '手动收集', icon: <IconCompass />, color: 'green', kind: 'manual', url: '', description: '手动收集的文章与线索' },
+  { id: 'requirements', name: '需求文档', icon: <IconFile />, color: 'orange', kind: 'link', url: '', description: '产品需求与业务文档' },
+  { id: 'architecture', name: '架构讨论', icon: <IconBook />, color: 'purple', kind: 'link', url: '', description: '架构方案与系统设计讨论' },
+]
+
+const EMPTY_SOURCE_DRAFT: SourceDraft = {
+  name: '',
+  kind: 'link',
+  url: '',
+  description: '',
 }

 export function WorkspaceExplorePage({
@@ -58,12 +81,17 @@ export function WorkspaceExplorePage({
      ),
    [workspaces],
  )
+  const [sourceConfigs, setSourceConfigs] = useState<DataSourceConfig[]>(INITIAL_SOURCES)
  const [activeSourceID, setActiveSourceID] = useState<DataSourceID>('all')
+  const [sourceModalMode, setSourceModalMode] = useState<'add' | 'edit' | null>(null)
+  const [editingSourceID, setEditingSourceID] = useState<DataSourceID | null>(null)
+  const [sourceDraft, setSourceDraft] = useState<SourceDraft>(EMPTY_SOURCE_DRAFT)
+  const [sourceError, setSourceError] = useState('')
  const filteredArticles = useMemo(
    () => (activeSourceID === 'all' ? articles : articles.filter((article) => article.sourceID === activeSourceID)),
    [activeSourceID, articles],
  )
-  const sources = useMemo(() => dataSources(articles), [articles])
+  const sources = useMemo(() => dataSources(articles, sourceConfigs), [articles, sourceConfigs])
  const [activeArticleID, setActiveArticleID] = useState<string | null>(filteredArticles[0]?.id ?? null)

  useEffect(() => {
@@ -77,7 +105,62 @@ export function WorkspaceExplorePage({
  }, [activeArticleID, filteredArticles])

  const selected = filteredArticles.find((article) => article.id === activeArticleID) ?? filteredArticles[0]
-  const activeSource = SOURCE_META[activeSourceID]
+  const activeSource = sourceByID(sources, activeSourceID)
+  const selectedSource = selected ? sourceByID(sources, selected.sourceID) : activeSource
+
+  function openAddSource() {
+    setEditingSourceID(null)
+    setSourceDraft(EMPTY_SOURCE_DRAFT)
+    setSourceError('')
+    setSourceModalMode('add')
+  }
+
+  function openEditSource(source: DataSourceCard) {
+    setEditingSourceID(source.id)
+    setSourceDraft({
+      name: source.name,
+      kind: source.kind,
+      url: source.url,
+      description: source.description,
+    })
+    setSourceError('')
+    setSourceModalMode('edit')
+  }
+
+  function saveSource() {
+    const name = sourceDraft.name.trim()
+    if (!name) {
+      setSourceError('请输入数据源名称')
+      return
+    }
+    const nextDraft = { ...sourceDraft, name, url: sourceDraft.url.trim(), description: sourceDraft.description.trim() }
+    if (sourceModalMode === 'edit' && editingSourceID) {
+      setSourceConfigs((current) => current.map((source) => source.id === editingSourceID ? { ...source, ...nextDraft } : source))
+    } else {
+      setSourceConfigs((current) => [
+        ...current,
+        {
+          id: `custom:${Date.now()}`,
+          ...nextDraft,
+          icon: sourceIcon(nextDraft.kind),
+          color: sourceColor(nextDraft.kind),
+        },
+      ])
+    }
+    setSourceModalMode(null)
+  }
+
+  function deleteSource(source: DataSourceCard) {
+    Modal.confirm({
+      title: `删除“${source.name}”数据源？`,
+      content: '删除后，该数据源将从探索页移除。',
+      okButtonProps: { status: 'danger' },
+      onOk: () => {
+        setSourceConfigs((current) => current.filter((item) => item.id !== source.id))
+        if (activeSourceID === source.id) setActiveSourceID('all')
+      },
+    })
+  }

  return (
    <div className="workspace-explore-page overview-page">
@@ -88,7 +171,7 @@ export function WorkspaceExplorePage({
        </div>
        <Space>
          <Button icon={<IconRefresh />}>同步数据源</Button>
-          <Button type="primary" icon={<IconLink />}>
+          <Button type="primary" icon={<IconLink />} onClick={openAddSource}>
            添加数据源
          </Button>
        </Space>
@@ -109,8 +192,8 @@ export function WorkspaceExplorePage({
              </span>
              {source.id !== 'all' ? (
                <span className="explore-source-actions" onClick={(event) => event.stopPropagation()}>
-                  <Button type="text" size="mini" icon={<IconEdit />} />
-                  <Button type="text" size="mini" status="danger" icon={<IconDelete />} />
+                  <Button aria-label={`编辑${source.name}`} type="text" size="mini" icon={<IconEdit />} onClick={() => openEditSource(source)} />
+                  <Button aria-label={`删除${source.name}`} type="text" size="mini" status="danger" icon={<IconDelete />} onClick={() => deleteSource(source)} />
                </span>
              ) : null}
            </Card>
@@ -131,29 +214,32 @@ export function WorkspaceExplorePage({
              <Button type="text" icon={<IconRefresh />} />
            </div>
            <div className="explore-list-body">
-              {filteredArticles.map((article) => (
-                <button
-                  key={`${article.project.id}-${article.id}`}
-                  className={article.id === selected.id ? 'explore-article-item active' : 'explore-article-item'}
-                  onClick={() => {
-                    setActiveArticleID(article.id)
-                    onSelectItem(article.title)
-                  }}
-                >
-                  <span className={`explore-source-logo ${SOURCE_META[article.sourceID].color}`}>
-                    {sourceInitial(SOURCE_META[article.sourceID].name)}
-                  </span>
-                  <span className="explore-article-copy">
-                    <Text type="secondary">
-                      {SOURCE_META[article.sourceID].name} · {article.time}
-                    </Text>
-                    <Text className="explore-article-title">{article.title}</Text>
-                    <Text className="explore-article-summary" type="secondary" ellipsis={{ showTooltip: true }}>
-                      {article.summary || '暂无正文'}
-                    </Text>
-                  </span>
-                </button>
-              ))}
+              {filteredArticles.map((article) => {
+                const articleSource = sourceByID(sources, article.sourceID)
+                return (
+                  <button
+                    key={`${article.project.id}-${article.id}`}
+                    className={article.id === selected.id ? 'explore-article-item active' : 'explore-article-item'}
+                    onClick={() => {
+                      setActiveArticleID(article.id)
+                      onSelectItem(article.title)
+                    }}
+                  >
+                    <span className={`explore-source-logo ${articleSource.color}`}>
+                      {sourceInitial(articleSource.name)}
+                    </span>
+                    <span className="explore-article-copy">
+                      <Text type="secondary">
+                        {articleSource.name} · {article.time}
+                      </Text>
+                      <Text className="explore-article-title">{article.title}</Text>
+                      <Text className="explore-article-summary" type="secondary" ellipsis={{ showTooltip: true }}>
+                        {article.summary || '暂无正文'}
+                      </Text>
+                    </span>
+                  </button>
+                )
+              })}
            </div>
          </Card>

@@ -168,10 +254,10 @@ export function WorkspaceExplorePage({
            </div>
            <article className="explore-article-body">
              <Space className="explore-article-meta" wrap>
-                <span className={`explore-source-logo small ${SOURCE_META[selected.sourceID].color}`}>
-                  {sourceInitial(SOURCE_META[selected.sourceID].name)}
+                <span className={`explore-source-logo small ${selectedSource.color}`}>
+                  {sourceInitial(selectedSource.name)}
                </span>
-                <Text type="secondary">{SOURCE_META[selected.sourceID].name}</Text>
+                <Text type="secondary">{selectedSource.name}</Text>
                <Text type="secondary">{selected.project.name}</Text>
                <Text type="secondary">{selected.time}</Text>
              </Space>
@@ -187,37 +273,73 @@ export function WorkspaceExplorePage({
          <Empty description="暂无数据源文章" />
        </Card>
      )}
+
+      <Modal
+        className="explore-source-modal"
+        title={sourceModalMode === 'edit' ? '编辑数据源' : '添加数据源'}
+        visible={sourceModalMode !== null}
+        okText="保存"
+        cancelText="取消"
+        onCancel={() => setSourceModalMode(null)}
+        onOk={saveSource}
+      >
+        <Space direction="vertical" size={12} className="action-form">
+          {sourceError && <Alert type="error" content={sourceError} />}
+          <label>
+            <Text>数据源名称</Text>
+            <Input value={sourceDraft.name} placeholder="例如：行业资讯" onChange={(name) => setSourceDraft((current) => ({ ...current, name }))} />
+          </label>
+          <label>
+            <Text>数据源类型</Text>
+            <Select value={sourceDraft.kind} onChange={(kind) => setSourceDraft((current) => ({ ...current, kind }))}>
+              <Select.Option value="link">网页链接</Select.Option>
+              <Select.Option value="rss">RSS 订阅</Select.Option>
+              <Select.Option value="manual">手动收集</Select.Option>
+            </Select>
+          </label>
+          <label>
+            <Text>链接地址</Text>
+            <Input value={sourceDraft.url} placeholder="https://example.com/feed" onChange={(url) => setSourceDraft((current) => ({ ...current, url }))} />
+          </label>
+          <label>
+            <Text>说明</Text>
+            <TextArea rows={4} value={sourceDraft.description} placeholder="数据源用途或内容范围" onChange={(description) => setSourceDraft((current) => ({ ...current, description }))} />
+          </label>
+        </Space>
+      </Modal>
    </div>
  )
 }

-function dataSources(articles: ExploreArticle[]): DataSourceCard[] {
-  const counts = new Map<DataSourceID, number>([
-    ['all', articles.length],
-    ['manual', 0],
-    ['requirements', 0],
-    ['architecture', 0],
-  ])
+function dataSources(articles: ExploreArticle[], configs: DataSourceConfig[]): DataSourceCard[] {
+  const counts = new Map<DataSourceID, number>(configs.map((source) => [source.id, source.id === 'all' ? articles.length : 0]))
  articles.forEach((article) => counts.set(article.sourceID, (counts.get(article.sourceID) ?? 0) + 1))
-
-  return (Object.keys(SOURCE_META) as DataSourceID[]).map((id) => ({
-    id,
-    ...SOURCE_META[id],
-    count: counts.get(id) ?? 0,
-  }))
+  return configs.map((source) => ({ ...source, count: counts.get(source.id) ?? 0 }))
 }

-function detectSource(article: InboxItem): DataSourceID {
+function sourceByID(sources: DataSourceCard[], id: DataSourceID): DataSourceCard {
+  return sources.find((source) => source.id === id) ?? sources[0]
+}
+
+function detectSource(article: InboxItem): BuiltinDataSourceID {
  const text = `${article.title} ${article.meta} ${article.tag} ${article.summary}`
-  if (/架构|技术方案|系统设计|architecture/i.test(text)) {
-    return 'architecture'
-  }
-  if (/需求|PRD|产品文档|requirement/i.test(text)) {
-    return 'requirements'
-  }
+  if (/架构|技术方案|系统设计|architecture/i.test(text)) return 'architecture'
+  if (/需求|PRD|产品文档|requirement/i.test(text)) return 'requirements'
  return 'manual'
 }

+function sourceIcon(kind: DataSourceKind) {
+  if (kind === 'rss') return <IconStorage />
+  if (kind === 'manual') return <IconCompass />
+  return <IconLink />
+}
+
+function sourceColor(kind: DataSourceKind) {
+  if (kind === 'rss') return 'orange'
+  if (kind === 'manual') return 'green'
+  return 'blue'
+}
+
 function sourceInitial(name: string) {
  return name.trim().slice(0, 1) || '源'
 }