feat: support for individual collapsing and expanding of specific models in the model marketplace (#105)

This commit is contained in:
Zhang Minghan 2024-03-13 08:30:08 +08:00
parent a6af18c910
commit dbee793f12
2 changed files with 28 additions and 6 deletions

View File

@ -5,7 +5,13 @@ import {
CardTitle,
} from "@/components/ui/card.tsx";
import { useTranslation } from "react-i18next";
import React, { Dispatch, useMemo, useReducer, useState } from "react";
import React, {
Dispatch,
useEffect,
useMemo,
useReducer,
useState,
} from "react";
import { Model as RawModel } from "@/api/types.tsx";
import { Input } from "@/components/ui/input.tsx";
import {
@ -438,11 +444,17 @@ function MarketItem({
}: MarketItemProps) {
const { t } = useTranslation();
const [stackedFilled, setStackedFilled] = useState<boolean>(false);
const checked = useMemo(
(): boolean => model.id.trim().length > 0 && model.name.trim().length > 0,
[model],
);
useEffect(() => {
setStackedFilled(stacked);
}, [stacked]);
const Actions = ({ stacked }: { stacked?: boolean }) => (
<div className={`market-row`}>
{!stacked && <div className={`grow`} />}
@ -491,6 +503,18 @@ function MarketItem({
</Button>
)}
<Button
size={`icon`}
variant={`outline`}
onClick={() => setStackedFilled(!stackedFilled)}
>
{!stackedFilled ? (
<Minimize className={`h-4 w-4`} />
) : (
<Maximize className={`h-4 w-4`} />
)}
</Button>
<Button
size={`icon`}
onClick={() =>
@ -505,7 +529,7 @@ function MarketItem({
</div>
);
return !stacked ? (
return stackedFilled ? (
<div
className={cn("market-item", !checked && "error")}
{...props}
@ -1001,7 +1025,7 @@ function Market() {
onClick={() => setStacked(!stacked)}
>
<Icon
icon={stacked ? <Minimize /> : <Maximize />}
icon={!stacked ? <Minimize /> : <Maximize />}
className={`h-4 w-4`}
/>
</Button>

View File

@ -191,9 +191,7 @@ function General({ data, dispatch, onChange }: CompProps<GeneralState>) {
/>
</ParagraphItem>
<ParagraphItem>
<Label>
<Require /> {t("admin.system.backend")}
</Label>
<Label>{t("admin.system.backend")}</Label>
<Input
value={data.backend}
onChange={(e) =>