kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: 将 ExtensionCard 替换为 InfoCard 以统一组件使用

Browse Source
This commit is contained in:
Wenjie Zhang 2026-04-27 10:22:41 +08:00
parent e9678e32d3
commit 417b1de308
7 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/extensions/McpCardList.vue
View File

@ -27,7 +27,7 @@
<template v-else> <template v-else>
<div v-if="filteredEnabledServers.length" class="extension-section-header">已添加</div> <div v-if="filteredEnabledServers.length" class="extension-section-header">已添加</div>
<ExtensionCardGrid> <ExtensionCardGrid>
<ExtensionCard <InfoCard
v-for="server in filteredEnabledServers" v-for="server in filteredEnabledServers"
:key="server.name" :key="server.name"
:title="server.name" :title="server.name"
@ -39,14 +39,14 @@
@click="navigateToDetail(server)" @click="navigateToDetail(server)"
> >
<template #icon> <template #icon>
<span class="extension-card-emoji-icon">{{ server.icon || '🔌' }}</span> <span class="info-card-emoji-icon">{{ server.icon || '🔌' }}</span>
</template> </template>
</ExtensionCard> </InfoCard>
</ExtensionCardGrid> </ExtensionCardGrid>
<div v-if="filteredDisabledServers.length" class="extension-section-header">可添加</div> <div v-if="filteredDisabledServers.length" class="extension-section-header">可添加</div>
<ExtensionCardGrid v-if="filteredDisabledServers.length"> <ExtensionCardGrid v-if="filteredDisabledServers.length">
<ExtensionCard <InfoCard
v-for="server in filteredDisabledServers" v-for="server in filteredDisabledServers"
:key="server.name" :key="server.name"
:title="server.name" :title="server.name"
@ -59,9 +59,9 @@
@action-click="handleSetServerEnabled(server, true)" @action-click="handleSetServerEnabled(server, true)"
> >
<template #icon> <template #icon>
<span class="extension-card-emoji-icon">{{ server.icon || '🔌' }}</span> <span class="info-card-emoji-icon">{{ server.icon || '🔌' }}</span>
</template> </template>
</ExtensionCard> </InfoCard>
</ExtensionCardGrid> </ExtensionCardGrid>
</template> </template>
@ -80,7 +80,7 @@ import { message } from 'ant-design-vue'
import { Plus, RefreshCw, Plug } from 'lucide-vue-next' import { Plus, RefreshCw, Plug } from 'lucide-vue-next'
import { mcpApi } from '@/apis/mcp_api' import { mcpApi } from '@/apis/mcp_api'
import ExtensionCardGrid from './ExtensionCardGrid.vue' import ExtensionCardGrid from './ExtensionCardGrid.vue'
import ExtensionCard from './ExtensionCard.vue' import InfoCard from '@/components/shared/InfoCard.vue'
import PageShoulder from '@/components/shared/PageShoulder.vue' import PageShoulder from '@/components/shared/PageShoulder.vue'
import McpFormModal from './McpFormModal.vue' import McpFormModal from './McpFormModal.vue'
@ -178,7 +178,7 @@ defineExpose({ fetchServers, loading })
<style lang="less" scoped> <style lang="less" scoped>
@import '@/assets/css/extensions.less'; @import '@/assets/css/extensions.less';
.extension-card-emoji-icon { .info-card-emoji-icon {
font-size: 18px; font-size: 18px;
line-height: 1; line-height: 1;
} }

10
web/src/components/extensions/SkillCardList.vue
View File

@ -42,7 +42,7 @@
已添加 Skills 已添加 Skills
</div> </div>
<ExtensionCardGrid> <ExtensionCardGrid>
<ExtensionCard <InfoCard
v-for="skill in filteredInstalledSkills" v-for="skill in filteredInstalledSkills"
:key="skill.slug" :key="skill.slug"
:title="skill.name" :title="skill.name"
@ -52,14 +52,14 @@
:status="{ label: '已安装', level: 'success' }" :status="{ label: '已安装', level: 'success' }"
@click="navigateToDetail(skill)" @click="navigateToDetail(skill)"
> >
</ExtensionCard> </InfoCard>
</ExtensionCardGrid> </ExtensionCardGrid>
<div v-if="filteredUninstalledBuiltinSkills.length" class="extension-section-header"> <div v-if="filteredUninstalledBuiltinSkills.length" class="extension-section-header">
可添加 Skills 可添加 Skills
</div> </div>
<ExtensionCardGrid v-if="filteredUninstalledBuiltinSkills.length"> <ExtensionCardGrid v-if="filteredUninstalledBuiltinSkills.length">
<ExtensionCard <InfoCard
v-for="skill in filteredUninstalledBuiltinSkills" v-for="skill in filteredUninstalledBuiltinSkills"
:key="skill.slug" :key="skill.slug"
:title="skill.name" :title="skill.name"
@ -69,7 +69,7 @@
action-label="安装" action-label="安装"
@action-click="handleInstallBuiltin(skill)" @action-click="handleInstallBuiltin(skill)"
> >
</ExtensionCard> </InfoCard>
</ExtensionCardGrid> </ExtensionCardGrid>
</template> </template>
@ -148,7 +148,7 @@ import { message } from 'ant-design-vue'
import { RefreshCw, Upload, Computer, BookMarked } from 'lucide-vue-next' import { RefreshCw, Upload, Computer, BookMarked } from 'lucide-vue-next'
import { skillApi } from '@/apis/skill_api' import { skillApi } from '@/apis/skill_api'
import ExtensionCardGrid from './ExtensionCardGrid.vue' import ExtensionCardGrid from './ExtensionCardGrid.vue'
import ExtensionCard from './ExtensionCard.vue' import InfoCard from '@/components/shared/InfoCard.vue'
import PageShoulder from '@/components/shared/PageShoulder.vue' import PageShoulder from '@/components/shared/PageShoulder.vue'
const BookMarkedIcon = BookMarked const BookMarkedIcon = BookMarked

10
web/src/components/extensions/SubagentCardList.vue
View File

@ -24,7 +24,7 @@
<template v-else> <template v-else>
<div v-if="filteredEnabledSubAgents.length" class="extension-section-header">已添加</div> <div v-if="filteredEnabledSubAgents.length" class="extension-section-header">已添加</div>
<ExtensionCardGrid> <ExtensionCardGrid>
<ExtensionCard <InfoCard
v-for="agent in filteredEnabledSubAgents" v-for="agent in filteredEnabledSubAgents"
:key="agent.name" :key="agent.name"
:title="agent.name" :title="agent.name"
@ -34,12 +34,12 @@
:status="{ label: '已添加', level: 'success' }" :status="{ label: '已添加', level: 'success' }"
@click="navigateToDetail(agent)" @click="navigateToDetail(agent)"
> >
</ExtensionCard> </InfoCard>
</ExtensionCardGrid> </ExtensionCardGrid>
<div v-if="filteredDisabledSubAgents.length" class="extension-section-header">可添加</div> <div v-if="filteredDisabledSubAgents.length" class="extension-section-header">可添加</div>
<ExtensionCardGrid v-if="filteredDisabledSubAgents.length"> <ExtensionCardGrid v-if="filteredDisabledSubAgents.length">
<ExtensionCard <InfoCard
v-for="agent in filteredDisabledSubAgents" v-for="agent in filteredDisabledSubAgents"
:key="agent.name" :key="agent.name"
:title="agent.name" :title="agent.name"
@ -50,7 +50,7 @@
@click="navigateToDetail(agent)" @click="navigateToDetail(agent)"
@action-click="handleSetAgentEnabled(agent, true)" @action-click="handleSetAgentEnabled(agent, true)"
> >
</ExtensionCard> </InfoCard>
</ExtensionCardGrid> </ExtensionCardGrid>
</template> </template>
@ -109,7 +109,7 @@ import { Plus, RefreshCw, Bot } from 'lucide-vue-next'
import { subagentApi } from '@/apis/subagent_api' import { subagentApi } from '@/apis/subagent_api'
import { toolApi } from '@/apis/tool_api' import { toolApi } from '@/apis/tool_api'
import ExtensionCardGrid from './ExtensionCardGrid.vue' import ExtensionCardGrid from './ExtensionCardGrid.vue'
import ExtensionCard from './ExtensionCard.vue' import InfoCard from '@/components/shared/InfoCard.vue'
import PageShoulder from '@/components/shared/PageShoulder.vue' import PageShoulder from '@/components/shared/PageShoulder.vue'
import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue' import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue'

6
web/src/components/extensions/ToolsCardList.vue
View File

@ -34,7 +34,7 @@
</div> </div>
<ExtensionCardGrid v-else> <ExtensionCardGrid v-else>
<ExtensionCard <InfoCard
v-for="tool in filteredTools" v-for="tool in filteredTools"
:key="tool.id" :key="tool.id"
:title="tool.name" :title="tool.name"
@ -44,7 +44,7 @@
:tags="toolTags(tool)" :tags="toolTags(tool)"
@click="selectTool(tool)" @click="selectTool(tool)"
> >
</ExtensionCard> </InfoCard>
</ExtensionCardGrid> </ExtensionCardGrid>
<a-modal <a-modal
@ -123,7 +123,7 @@ import { Wrench, RefreshCw, SlidersHorizontal, FileText, Tag, Tags, List } from
import { toolApi } from '@/apis/tool_api' import { toolApi } from '@/apis/tool_api'
import { getToolIcon } from '@/components/ToolCallingResult/toolRegistry' import { getToolIcon } from '@/components/ToolCallingResult/toolRegistry'
import ExtensionCardGrid from './ExtensionCardGrid.vue' import ExtensionCardGrid from './ExtensionCardGrid.vue'
import ExtensionCard from './ExtensionCard.vue' import InfoCard from '@/components/shared/InfoCard.vue'
import PageShoulder from '@/components/shared/PageShoulder.vue' import PageShoulder from '@/components/shared/PageShoulder.vue'
const WrenchIcon = Wrench const WrenchIcon = Wrench

28
web/src/components/extensions/ExtensionCard.vue → web/src/components/shared/InfoCard.vue
View File

@ -1,22 +1,22 @@
<template> <template>
<div <div
class="extension-card" class="info-card"
:class="{ 'extension-card-disabled': disabled }" :class="{ 'info-card-disabled': disabled }"
@click="$emit('click')" @click="$emit('click')"
> >
<div class="extension-card-header"> <div class="info-card-header">
<div class="extension-card-icon"> <div class="info-card-icon">
<slot name="icon"> <slot name="icon">
<component :is="defaultIcon" v-if="defaultIcon" :size="20" /> <component :is="defaultIcon" v-if="defaultIcon" :size="20" />
</slot> </slot>
</div> </div>
<div class="extension-card-info"> <div class="info-card-info">
<span class="extension-card-name" :title="title">{{ title }}</span> <span class="info-card-name" :title="title">{{ title }}</span>
<span v-if="subtitle" class="extension-card-subtitle" :title="subtitle">{{ <span v-if="subtitle" class="info-card-subtitle" :title="subtitle">{{
subtitle subtitle
}}</span> }}</span>
</div> </div>
<div class="extension-card-status"> <div class="info-card-status">
<slot name="status" /> <slot name="status" />
<template v-if="!$slots.status"> <template v-if="!$slots.status">
<button <button
@ -41,13 +41,13 @@
</div> </div>
</div> </div>
<div v-if="$slots.info" class="extension-card-body"> <div v-if="$slots.info" class="info-card-body">
<slot name="info" /> <slot name="info" />
</div> </div>
<div v-else-if="description" class="extension-card-desc" :title="description"> <div v-else-if="description" class="info-card-desc" :title="description">
{{ description }} {{ description }}
</div> </div>
<div v-else-if="info && info.length > 0" class="extension-card-info-rows"> <div v-else-if="info && info.length > 0" class="info-card-info-rows">
<div v-for="(row, idx) in info" :key="idx" class="info-row"> <div v-for="(row, idx) in info" :key="idx" class="info-row">
<span class="info-label">{{ row.label }}</span> <span class="info-label">{{ row.label }}</span>
<span class="info-value">{{ row.value }}</span> <span class="info-value">{{ row.value }}</span>
@ -56,7 +56,7 @@
<div <div
v-if="$slots.tags || (normalizedTags && normalizedTags.length > 0)" v-if="$slots.tags || (normalizedTags && normalizedTags.length > 0)"
class="extension-card-tags" class="info-card-tags"
> >
<slot name="tags"> <slot name="tags">
<span <span
@ -70,7 +70,7 @@
</slot> </slot>
</div> </div>
<div v-if="$slots.footer" class="extension-card-footer"> <div v-if="$slots.footer" class="info-card-footer">
<slot name="footer" /> <slot name="footer" />
</div> </div>
</div> </div>
@ -113,7 +113,7 @@ const normalizedTags = computed(() => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.extension-card { .info-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;

6
web/src/views/DataBaseView.vue
View File

@ -205,7 +205,7 @@
<!-- 数据库列表 --> <!-- 数据库列表 -->
<ExtensionCardGrid v-else> <ExtensionCardGrid v-else>
<ExtensionCard <InfoCard
v-for="database in filteredDatabases" v-for="database in filteredDatabases"
:key="database.db_id" :key="database.db_id"
:title="database.name" :title="database.name"
@ -220,7 +220,7 @@
<template #status> <template #status>
<LockOutlined v-if="database.metadata?.is_private" title="私有知识库" /> <LockOutlined v-if="database.metadata?.is_private" title="私有知识库" />
</template> </template>
</ExtensionCard> </InfoCard>
</ExtensionCardGrid> </ExtensionCardGrid>
</div> </div>
</template> </template>
@ -240,7 +240,7 @@ import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue'
import EmbeddingModelSelector from '@/components/EmbeddingModelSelector.vue' import EmbeddingModelSelector from '@/components/EmbeddingModelSelector.vue'
import ShareConfigForm from '@/components/ShareConfigForm.vue' import ShareConfigForm from '@/components/ShareConfigForm.vue'
import ExtensionCardGrid from '@/components/extensions/ExtensionCardGrid.vue' import ExtensionCardGrid from '@/components/extensions/ExtensionCardGrid.vue'
import ExtensionCard from '@/components/extensions/ExtensionCard.vue' import InfoCard from '@/components/shared/InfoCard.vue'
import dayjs, { parseToShanghai } from '@/utils/time' import dayjs, { parseToShanghai } from '@/utils/time'
import AiTextarea from '@/components/AiTextarea.vue' import AiTextarea from '@/components/AiTextarea.vue'
import { getKbTypeLabel, getKbTypeIcon, getKbTypeColor } from '@/utils/kb_utils' import { getKbTypeLabel, getKbTypeIcon, getKbTypeColor } from '@/utils/kb_utils'

6
web/src/views/ModelConfigView.vue
View File

@ -16,7 +16,7 @@ import { modelProviderApi } from '@/apis/system_api'
import { modelIcons } from '@/utils/modelIcon' import { modelIcons } from '@/utils/modelIcon'
import PageHeader from '@/components/shared/PageHeader.vue' import PageHeader from '@/components/shared/PageHeader.vue'
import PageShoulder from '@/components/shared/PageShoulder.vue' import PageShoulder from '@/components/shared/PageShoulder.vue'
import ExtensionCard from '@/components/extensions/ExtensionCard.vue' import InfoCard from '@/components/shared/InfoCard.vue'
import ExtensionCardGrid from '@/components/extensions/ExtensionCardGrid.vue' import ExtensionCardGrid from '@/components/extensions/ExtensionCardGrid.vue'
// ============ State ============ // ============ State ============
@ -599,7 +599,7 @@ onMounted(loadProviders)
<!-- Provider Card Grid --> <!-- Provider Card Grid -->
<ExtensionCardGrid :min-width="320"> <ExtensionCardGrid :min-width="320">
<ExtensionCard <InfoCard
v-for="provider in filteredProviders" v-for="provider in filteredProviders"
:key="provider.provider_id" :key="provider.provider_id"
:title="provider.display_name" :title="provider.display_name"
@ -632,7 +632,7 @@ onMounted(loadProviders)
</a-button> </a-button>
</a-tooltip> </a-tooltip>
</template> </template>
</ExtensionCard> </InfoCard>
</ExtensionCardGrid> </ExtensionCardGrid>
<!-- Provider Edit Modal --> <!-- Provider Edit Modal -->