* add empty fields style.

2024-02-19 14:35:38 +08:00
parent 38e2e71eae
commit c2c9c58300
6 changed files with 93 additions and 98 deletions
@@ -8,19 +8,13 @@

 .mini-program .detail {
    width: 390px;
-    flex: none;
    background: #fff;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
 }

 .mini-program .detail .header {
    padding: 24px 20px 20px 20px;
-    display: flex;
    gap: 20px;
    color: var(--color-slate-800);
-    flex: none;
    border-bottom: 1px solid var(--color-gray-200);
 }

@@ -32,21 +26,12 @@
 .mini-program .detail .header .program-avatar {
    width: 46px;
    height: 46px;
-    flex: none;
-}
-
-.mini-program .detail .header .content {
-    flex: auto;
-    overflow: hidden;
 }

 .mini-program .detail .header .content .title {
    font-size: 14px;
    font-weight: 500;
    padding-right: 64px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }

 .mini-program .detail .header .content .desc {
@@ -58,20 +43,9 @@
 }

 .mini-program .detail .body {
-    flex: auto;
-    display: flex;
-    flex-direction: column;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
-    overflow: hidden;
-}
-
-.mini-program .detail .body .language-model {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex: none;
 }

 .mini-program .detail .body .language-model .btn {
@@ -82,18 +56,17 @@
    background: var(--color-gray-300);
 }

-.mini-program .detail .body .form-container {
-    flex: auto;
-    overflow-y: auto;
-}
-
 .mini-program .detail .footer {
    padding: 20px 20px 24px 20px;
-    flex: none;
 }

 .mini-program .chat {
-    flex: auto;
    flex-basis: 67%;
    background: #fff;
 }
+
+.mini-program .chat .chat-tip {
+    gap: 8px;
+    font-size: 14px;
+    color: var(--color-slate-600);
+}
@@ -494,6 +494,7 @@ $lang->ai->miniPrograms->fieldConfiguration = 'Field configuration';
 $lang->ai->miniPrograms->summary            = 'There are %s small programs on this page.';
 $lang->ai->miniPrograms->generate           = 'Generate';
 $lang->ai->miniPrograms->regenerate         = 'Regenerate';
+$lang->ai->miniPrograms->chatTip            = 'Click the generate button on the left to give it a try.';

 $lang->ai->models = new stdclass();
 $lang->ai->models->title          = 'Language Model Configuration';
@@ -494,6 +494,7 @@ $lang->ai->miniPrograms->fieldConfiguration = 'Field configuration';
 $lang->ai->miniPrograms->summary            = 'There are %s small programs on this page.';
 $lang->ai->miniPrograms->generate           = 'Generate';
 $lang->ai->miniPrograms->regenerate         = 'Regenerate';
+$lang->ai->miniPrograms->chatTip            = 'Click the generate button on the left to give it a try.';

 $lang->ai->models = new stdclass();
 $lang->ai->models->title          = 'Language Model Configuration';
@@ -494,6 +494,7 @@ $lang->ai->miniPrograms->fieldConfiguration = 'Field configuration';
 $lang->ai->miniPrograms->summary            = 'There are %s small programs on this page.';
 $lang->ai->miniPrograms->generate           = 'Generate';
 $lang->ai->miniPrograms->regenerate         = 'Regenerate';
+$lang->ai->miniPrograms->chatTip            = 'Click the generate button on the left to give it a try.';

 $lang->ai->models = new stdclass();
 $lang->ai->models->title          = 'Language Model Configuration';
@@ -494,6 +494,7 @@ $lang->ai->miniPrograms->fieldConfiguration = '字段配置';
 $lang->ai->miniPrograms->summary            = '本页共 %s 个小程序。';
 $lang->ai->miniPrograms->generate           = '生成';
 $lang->ai->miniPrograms->regenerate         = '重新生成';
+$lang->ai->miniPrograms->chatTip            = '点击左侧的生成按钮试试吧';

 $lang->ai->models = new stdclass();
 $lang->ai->models->title          = '语言模型配置';
@@ -8,50 +8,53 @@ jsVar('regenerateLang', $lang->ai->miniPrograms->regenerate);
 jsVar('emptyNameWarning', $lang->ai->miniPrograms->field->emptyNameWarning);

 $formGroups = array();
-foreach($fields as $field)
+if(count($fields) !== 0)
 {
-    if($field->type === 'textarea')
+    foreach($fields as $field)
    {
-        $control = textarea(
-            set::rows(1),
-            set::name("field-{$field->id}"),
-            set::placeholder($field->placeholder),
-            setData('name', $field->name)
-        );
-    }
-    elseif($field->type === 'radio')
-    {
-        $options = explode(',', $field->options);
-        $control = picker(
-            set::name("field-{$field->id}"),
-            set::items(array_combine($options, $options)),
-            setData('name', $field->name)
-        );
-    }
-    elseif($field->type === 'checkbox')
-    {
-        $options = explode(',', $field->options);
-        $control = picker(
-            set::name("field-{$field->id}"),
-            set::items(array_combine($options, $options)),
-            set::multiple(true),
-            setData('name', $field->name)
-        );
-    }
-    else
-    {
-        $control = input(
-            set::name("field-{$field->id}"),
-            set::placeholder($field->placeholder),
-            setData('name', $field->name)
-        );
-    }
+        if($field->type === 'textarea')
+        {
+            $control = textarea(
+                set::rows(1),
+                set::name("field-{$field->id}"),
+                set::placeholder($field->placeholder),
+                setData('name', $field->name)
+            );
+        }
+        elseif($field->type === 'radio')
+        {
+            $options = explode(',', $field->options);
+            $control = picker(
+                set::name("field-{$field->id}"),
+                set::items(array_combine($options, $options)),
+                setData('name', $field->name)
+            );
+        }
+        elseif($field->type === 'checkbox')
+        {
+            $options = explode(',', $field->options);
+            $control = picker(
+                set::name("field-{$field->id}"),
+                set::items(array_combine($options, $options)),
+                set::multiple(true),
+                setData('name', $field->name)
+            );
+        }
+        else
+        {
+            $control = input(
+                set::name("field-{$field->id}"),
+                set::placeholder($field->placeholder),
+                setData('name', $field->name)
+            );
+        }

-    $formGroups[] = formGroup(
-        set::label($field->name),
-        set::required($field->required === '1'),
-        $control
-    );
+        $formGroups[] = formGroup(
+            set::label($field->name),
+            set::required($field->required === '1'),
+            $control
+        );
+    }
 }

 jsVar('fields', $fields);
@@ -63,18 +66,18 @@ $delete = $star === 'star' ? 'true' : 'false';
 div(
    setClass('mini-program fixed flex'),
    div(
-        setClass('detail col shadow-md'),
+        setClass('detail col shadow-md h-full flex-none'),
        div(
-            setClass('header', 'relative'),
+            setClass('header relative flex flex-none'),
            div(
-                setClass('program-avatar center'),
+                setClass('program-avatar center flex-none'),
                setStyle(array('border' => "1px solid {$config->ai->miniPrograms->themeList[$iconTheme][1]}", 'background-color' => $config->ai->miniPrograms->themeList[$iconTheme][0])),
                html($config->ai->miniPrograms->iconList[$iconName])
            ),
            div(
-                setClass('content'),
+                setClass('content flex-1 overflow-hidden'),
                div(
-                    setClass('title pb-2'),
+                    setClass('title pb-2 ellipsis'),
                    $miniProgram->name
                ),
                div(
@@ -93,9 +96,9 @@ div(
            )
        ),
        div(
-            setClass('body'),
+            setClass('body col overflow-hidden', empty($formGroups) ? 'flex-none' : 'flex-1'),
            div(
-                setClass('language-model'),
+                setClass('language-model flex flex-none justify-between items-center'),
                div(
                    setClass('content flex gap-2.5'),
                    span(
@@ -104,25 +107,29 @@ div(
                    ),
                    span($lang->ai->miniPrograms->modelList[$miniProgram->model]),
                ),
-                btn(
-                    set::size('md'),
-                    setClass('ghost'),
-                    set::icon('trash'),
-                    $lang->ai->chatReset,
-                    on::click('window.aiMiniProgramChat.handleRestBtnClick')
-                ),
+                empty($formGroups)
+                    ? null
+                    : btn(
+                        set::size('md'),
+                        setClass('ghost'),
+                        set::icon('trash'),
+                        $lang->ai->chatReset,
+                        on::click('window.aiMiniProgramChat.handleRestBtnClick')
+                    )
            ),
-            div(
-                setClass('form-container p-1'),
-                form(
-                    set::grid(false),
-                    set::actions(array()),
-                    $formGroups
-                ),
-            )
+            empty($formGroups)
+                ? null
+                : div(
+                    setClass('form-container p-1 flex-1 overflow-y-auto'),
+                    form(
+                        set::grid(false),
+                        set::actions(array()),
+                        $formGroups
+                    )
+                )
        ),
        div(
-            setClass('footer'),
+            setClass('footer flex-none'),
            btn(
                setClass('primary block w-full'),
                $lang->ai->miniPrograms->generate,
@@ -131,7 +138,18 @@ div(
        )
    ),
    div(
-        setClass('chat')
+        setClass('chat shadow-md flex-1 center'),
+        div(
+            setClass('chat-tip flex'),
+            html(<<<END
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13.3334 6.66665C13.3334 8.93588 11.9162 10.8741 9.91858 11.6445H8.00008H6.08158C4.08395 10.8741 2.66675 8.93588 2.66675 6.66665C2.66675 3.72111 5.05455 1.33331 8.00008 1.33331C10.9456 1.33331 13.3334 3.72111 13.3334 6.66665Z" stroke="#FF9F46" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M9.91858 11.6445L9.69221 14.361C9.67781 14.5338 9.53338 14.6667 9.36001 14.6667H6.64011C6.46674 14.6667 6.32231 14.5338 6.30794 14.361L6.08154 11.6445" stroke="#FF9F46" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M8.47095 4.78107L7.05673 6.19528L9.17805 6.90239L7.52814 8.5523" stroke="#FF9F46" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            END),
+            $lang->ai->miniPrograms->chatTip
+        )
    )
 );