chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-06-16 21:03:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(pluginStore): enhance plugin store entry with source information and update related functionality

Browse Source
This commit is contained in:
LTbinglingfeng
2026-06-15 01:21:10 +08:00
Unverified
parent 22cbb91c2f
commit 246069d128
7 changed files with 93 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/plugins/PluginStorePage.tsx
+45 -31
View File
@@ -40,6 +40,9 @@ const getErrorDetailMessage = (error: unknown): string => {
const DESCRIPTION_COLLAPSED_LINES = 2;
const getStoreEntryTitle = (entry: PluginStoreEntry) => entry.name || entry.id;
const getStoreEntryKey = (entry: PluginStoreEntry) => entry.storeId || entry.id;
const getDescriptionDOMID = (entryKey: string) =>
`plugin-store-desc-${encodeURIComponent(entryKey)}`;
function StoreCardLogo({ src }: { src: string }) {
const [failed, setFailed] = useState(false);
@@ -66,10 +69,10 @@ export function PluginStorePage() {
const [error, setError] = useState<StoreLoadError | null>(null);
const [filter, setFilter] = useState('');
const [statusFilter, setStatusFilter] = useState<StoreStatusFilter>('all');
const [installingID, setInstallingID] = useState('');
const [restartRequiredIDs, setRestartRequiredIDs] = useState<string[]>([]);
const [expandedDescriptionIDs, setExpandedDescriptionIDs] = useState<string[]>([]);
const [overflowingDescriptionIDs, setOverflowingDescriptionIDs] = useState<string[]>([]);
const [installingKey, setInstallingKey] = useState('');
const [restartRequiredKeys, setRestartRequiredKeys] = useState<string[]>([]);
const [expandedDescriptionKeys, setExpandedDescriptionKeys] = useState<string[]>([]);
const [overflowingDescriptionKeys, setOverflowingDescriptionKeys] = useState<string[]>([]);
const descriptionRefs = useRef<Record<string, HTMLParagraphElement | null>>({});
const connected = connectionStatus === 'connected';
@@ -145,6 +148,8 @@ export function PluginStorePage() {
plugin.description,
plugin.author,
plugin.repository,
plugin.sourceName,
plugin.sourceUrl,
plugin.license,
...plugin.tags,
]
@@ -166,20 +171,20 @@ export function PluginStorePage() {
{ key: 'updates', label: t('plugin_store.filter_updates'), count: stats.updates },
];
const restartNames = restartRequiredIDs.map((id) => {
const entry = data?.plugins.find((plugin) => plugin.id === id);
return entry ? getStoreEntryTitle(entry) : id;
const restartNames = restartRequiredKeys.map((key) => {
const entry = data?.plugins.find((plugin) => getStoreEntryKey(plugin) === key);
return entry ? getStoreEntryTitle(entry) : key;
});
const hasActiveFilters = Boolean(filter.trim()) || statusFilter !== 'all';
const expandedDescriptionIDSet = useMemo(
() => new Set(expandedDescriptionIDs),
[expandedDescriptionIDs]
const expandedDescriptionKeySet = useMemo(
() => new Set(expandedDescriptionKeys),
[expandedDescriptionKeys]
);
const overflowingDescriptionIDSet = useMemo(
() => new Set(overflowingDescriptionIDs),
[overflowingDescriptionIDs]
const overflowingDescriptionKeySet = useMemo(
() => new Set(overflowingDescriptionKeys),
[overflowingDescriptionKeys]
);
const registerDescriptionRef = useCallback((id: string, node: HTMLParagraphElement | null) => {
@@ -203,7 +208,7 @@ export function PluginStorePage() {
})
.map(([id]) => id);
setOverflowingDescriptionIDs((current) => {
setOverflowingDescriptionKeys((current) => {
if (current.length === nextIDs.length && current.every((id) => nextIDs.includes(id))) {
return current;
}
@@ -230,12 +235,13 @@ export function PluginStorePage() {
}, [measureDescriptionOverflow]);
const toggleDescription = useCallback((id: string) => {
setExpandedDescriptionIDs((current) =>
setExpandedDescriptionKeys((current) =>
current.includes(id) ? current.filter((currentID) => currentID !== id) : [...current, id]
);
}, []);
const handleInstall = (entry: PluginStoreEntry) => {
const entryKey = getStoreEntryKey(entry);
const isUpdate = entry.installed && entry.updateAvailable;
const title = getStoreEntryTitle(entry);
const target = entry.version ? `${title} v${entry.version}` : title;
@@ -251,16 +257,16 @@ export function PluginStorePage() {
confirmText: isUpdate ? t('plugin_store.update') : t('plugin_store.install'),
variant: 'primary',
onConfirm: async () => {
setInstallingID(entry.id);
setInstallingKey(entryKey);
try {
const result = await pluginStoreApi.install(entry.id);
const result = await pluginStoreApi.install(entry.id, entry.sourceId || undefined);
showNotification(
isUpdate ? t('plugin_store.update_success') : t('plugin_store.install_success'),
'success'
);
if (result.restartRequired) {
setRestartRequiredIDs((current) =>
current.includes(entry.id) ? current : [...current, entry.id]
setRestartRequiredKeys((current) =>
current.includes(entryKey) ? current : [...current, entryKey]
);
showNotification(t('plugin_store.restart_required_notice'), 'warning');
}
@@ -270,13 +276,14 @@ export function PluginStorePage() {
showNotification(`${t(failedKey)}: ${getErrorMessage(err, t(failedKey))}`, 'error');
throw err;
} finally {
setInstallingID('');
setInstallingKey('');
}
},
});
};
const renderCard = (entry: PluginStoreEntry) => {
const entryKey = getStoreEntryKey(entry);
const logo = resolvePluginAssetURL(entry.logo, apiBase);
const repositoryURL = buildRepositoryURL(entry.repository);
const homepageURL = /^https?:\/\//i.test(entry.homepage) ? entry.homepage : '';
@@ -289,13 +296,18 @@ export function PluginStorePage() {
: entry.version
? `v${entry.version}`
: '';
const metaItems = [versionText, entry.author, entry.license].filter(Boolean);
const isDescriptionExpanded = expandedDescriptionIDSet.has(entry.id);
const isDescriptionOverflowing = overflowingDescriptionIDSet.has(entry.id);
const descriptionID = `plugin-store-desc-${entry.id}`;
const sourceText = entry.sourceName
? t('plugin_store.source_name', { source: entry.sourceName })
: '';
const metaItems = [versionText, sourceText, entry.author, entry.license].filter(Boolean);
const isInstalling = installingKey === entryKey;
const hasPendingInstall = Boolean(installingKey);
const isDescriptionExpanded = expandedDescriptionKeySet.has(entryKey);
const isDescriptionOverflowing = overflowingDescriptionKeySet.has(entryKey);
const descriptionID = getDescriptionDOMID(entryKey);
return (
<article key={entry.id} className={styles.card}>
<article key={entryKey} className={styles.card}>
<div className={styles.cardHeader}>
<div className={styles.logoBox} aria-hidden="true">
<StoreCardLogo src={logo} />
@@ -320,7 +332,7 @@ export function PluginStorePage() {
<div className={styles.cardDescBlock}>
<p
id={descriptionID}
ref={(node) => registerDescriptionRef(entry.id, node)}
ref={(node) => registerDescriptionRef(entryKey, node)}
className={`${styles.cardDesc} ${
isDescriptionExpanded ? styles.cardDescExpanded : ''
}`}
@@ -331,7 +343,7 @@ export function PluginStorePage() {
<button
type="button"
className={styles.cardDescToggle}
onClick={() => toggleDescription(entry.id)}
onClick={() => toggleDescription(entryKey)}
aria-expanded={isDescriptionExpanded}
aria-controls={descriptionID}
>
@@ -348,7 +360,7 @@ export function PluginStorePage() {
{metaItems.length > 0 ? (
<div className={styles.cardMeta}>
{metaItems.map((item, index) => (
<span key={`${entry.id}-meta-${index}`} className={styles.metaItem}>
<span key={`${entryKey}-meta-${index}`} className={styles.metaItem}>
{index > 0 ? <span className={styles.metaDot} aria-hidden="true" /> : null}
{index === 0 && versionText ? <strong>{item}</strong> : item}
</span>
@@ -359,7 +371,7 @@ export function PluginStorePage() {
{entry.tags.length > 0 ? (
<div className={styles.tagRow}>
{entry.tags.map((tag) => (
<span key={`${entry.id}-tag-${tag}`} className={styles.tag}>
<span key={`${entryKey}-tag-${tag}`} className={styles.tag}>
{tag}
</span>
))}
@@ -372,7 +384,8 @@ export function PluginStorePage() {
<Button
size="sm"
onClick={() => handleInstall(entry)}
disabled={!connected || Boolean(installingID)}
disabled={!connected || (hasPendingInstall && !isInstalling)}
loading={isInstalling}
>
<IconDownload size={14} />
{t('plugin_store.install')}
@@ -383,7 +396,8 @@ export function PluginStorePage() {
<Button
size="sm"
onClick={() => handleInstall(entry)}
disabled={!connected || Boolean(installingID)}
disabled={!connected || (hasPendingInstall && !isInstalling)}
loading={isInstalling}
>
<IconRefreshCw size={14} />
{t('plugin_store.update')}
src/i18n/locales/en.json
+1
View File
@@ -1173,6 +1173,7 @@
"description": "Browse the plugin registry, then install or update plugins for the current backend.",
"description_show_more": "Show more",
"description_show_less": "Show less",
"source_name": "Source: {{source}}",
"refresh": "Refresh",
"retry": "Retry",
"load_failed": "Failed to load the plugin store",
src/i18n/locales/ru.json
+1
View File
@@ -1160,6 +1160,7 @@
"description": "Просматривайте реестр плагинов, устанавливайте и обновляйте плагины для текущего бэкенда.",
"description_show_more": "Показать больше",
"description_show_less": "Свернуть",
"source_name": "Источник: {{source}}",
"refresh": "Обновить",
"retry": "Повторить",
"load_failed": "Не удалось загрузить магазин плагинов",
src/i18n/locales/zh-CN.json
+1
View File
@@ -1173,6 +1173,7 @@
"description": "浏览插件注册表,为当前后端安装或更新插件。",
"description_show_more": "展开描述",
"description_show_less": "收起描述",
"source_name": "来源：{{source}}",
"refresh": "刷新",
"retry": "重试",
"load_failed": "插件商店加载失败",
src/i18n/locales/zh-TW.json
+1
View File
@@ -1199,6 +1199,7 @@
"description": "瀏覽插件註冊表,為目前後端安裝或更新插件。",
"description_show_more": "展開描述",
"description_show_less": "收起描述",
"source_name": "來源：{{source}}",
"refresh": "重新整理",
"retry": "重試",
"load_failed": "插件商店載入失敗",
src/services/api/plugins.ts
+30 -2
View File
@@ -11,6 +11,7 @@ import type {
PluginStoreEntry,
PluginStoreInstallResult,
PluginStoreResponse,
PluginStoreSource,
} from '@/types';
const asString = (value: unknown): string => {
@@ -135,12 +136,18 @@ const normalizeStoreEntry = (value: unknown): PluginStoreEntry | null => {
if (!isRecord(value)) return null;
const id = asString(value.id).trim();
if (!id) return null;
const sourceId = asString(value.source_id).trim();
const storeId = asString(value.store_id).trim() || (sourceId ? `${sourceId}/${id}` : id);
const tags = Array.isArray(value.tags)
? value.tags.map((item) => asString(item).trim()).filter(Boolean)
: [];
return {
storeId,
sourceId,
sourceName: asString(value.source_name).trim(),
sourceUrl: asString(value.source_url).trim(),
id,
name: asString(value.name).trim(),
description: asString(value.description).trim(),
@@ -162,15 +169,31 @@ const normalizeStoreEntry = (value: unknown): PluginStoreEntry | null => {
};
};
const normalizeStoreSource = (value: unknown): PluginStoreSource | null => {
if (!isRecord(value)) return null;
const id = asString(value.id).trim();
const url = asString(value.url).trim();
if (!id && !url) return null;
return {
id,
name: asString(value.name).trim(),
url,
};
};
const normalizeStoreList = (value: unknown): PluginStoreResponse => {
const source = isRecord(value) ? value : {};
const plugins = Array.isArray(source.plugins)
? source.plugins.map((item) => normalizeStoreEntry(item)).filter(Boolean) as PluginStoreEntry[]
: [];
const sources = Array.isArray(source.sources)
? source.sources.map((item) => normalizeStoreSource(item)).filter(Boolean) as PluginStoreSource[]
: [];
return {
pluginsEnabled: asBoolean(source.plugins_enabled),
pluginsDir: asString(source.plugins_dir).trim() || 'plugins',
sources,
plugins,
};
};
@@ -179,6 +202,9 @@ const normalizeInstallResult = (value: unknown): PluginStoreInstallResult => {
const source = isRecord(value) ? value : {};
return {
status: asString(source.status).trim(),
sourceId: asString(source.source_id).trim(),
sourceName: asString(source.source_name).trim(),
sourceUrl: asString(source.source_url).trim(),
id: asString(source.id).trim(),
version: asString(source.version).trim(),
path: asString(source.path).trim(),
@@ -219,8 +245,10 @@ export const pluginStoreApi = {
return normalizeStoreList(data);
},
async install(id: string): Promise<PluginStoreInstallResult> {
const data = await apiClient.post(`/plugin-store/${encodeURIComponent(id)}/install`);
async install(id: string, sourceId?: string): Promise<PluginStoreInstallResult> {
const path = `/plugin-store/${encodeURIComponent(id)}/install`;
const query = sourceId ? `?${new URLSearchParams({ source: sourceId }).toString()}` : '';
const data = await apiClient.post(`${path}${query}`);
return normalizeInstallResult(data);
},
};
src/types/plugin.ts
+14
View File
@@ -61,6 +61,10 @@ export interface PluginDeleteResult {
}
export interface PluginStoreEntry {
storeId: string;
sourceId: string;
sourceName: string;
sourceUrl: string;
id: string;
name: string;
description: string;
@@ -81,14 +85,24 @@ export interface PluginStoreEntry {
updateAvailable: boolean;
}
export interface PluginStoreSource {
id: string;
name: string;
url: string;
}
export interface PluginStoreResponse {
pluginsEnabled: boolean;
pluginsDir: string;
sources: PluginStoreSource[];
plugins: PluginStoreEntry[];
}
export interface PluginStoreInstallResult {
status: string;
sourceId: string;
sourceName: string;
sourceUrl: string;
id: string;
version: string;
path: string;