260225 文章時間、調色盤加色減色、目前字數計算

app/Filament/Resources/NewsResource.php

@@ -38,6 +38,7 @@ use Malzariey\FilamentLexicalEditor\Enums\ToolbarItem;
 use Malzariey\FilamentLexicalEditor\FilamentLexicalEditor;
 use SolutionForest\FilamentTranslateField\Forms\Component\Translate;
 use RalphJSmit\Filament\SEO\SEO;
+use Illuminate\Support\HtmlString;
 
 class NewsResource extends Resource
 {
@@ -72,7 +73,7 @@ class NewsResource extends Resource
                     ])->columnSpanFull()->columns(2),
                     Group::make()->schema([
                         DatePicker::make('post_date')
-                        ->label("發布日期")
+                        ->label("文章日期")
                         ->closeOnDateSelection()->required(),
                         DateTimePicker::make('start_date')
                         ->label("預約發布時間")
@@ -92,13 +93,58 @@ class NewsResource extends Resource
                     Translate::make()->schema(fn (string $locale) => [
                         TextInput::make('title')
                         ->label("標題")
+                        ->reactive()
+                        ->afterStateHydrated(function ($state, callable $set) {
+                            $set('title_length', mb_strlen($state ?? ''));
+                        })
+                        ->afterStateUpdated(function ($state, callable $set) {
+                            $set('title_length', mb_strlen($state ?? ''));
+                        })
+                        ->helperText(function (callable $get) {
+                            $length = $get('title_length') ?? 0;
+                            $max = 24;
+
+                            $divClass = 'text-limit-amount';
+
+                            return new HtmlString("
+                                <div class='{$divClass} text-sm'>
+                                    目前字數：{$length} / {$max}
+                                </div>
+                            ");
+                        })
                         ->columnSpan(1),
                         TextInput::make('written_by')
                         ->label("發佈者")->columnSpan(1),
-                        Textarea::make("description")->rows(5)->columnSpanFull()->label("短文"),
+                        
+
+                        Textarea::make("description")
+                        ->rows(5)
+                        ->columnSpanFull()
+                        ->label("短文")
+                        
+                        ->reactive()
+                        ->afterStateHydrated(function ($state, callable $set) {
+                            $set('description_length', mb_strlen($state ?? ''));
+                        })
+                        ->afterStateUpdated(function ($state, callable $set) {
+                            $set('description_length', mb_strlen($state ?? ''));
+                        })
+                        ->helperText(function (callable $get) {
+                            $length = $get('description_length') ?? 0;
+                            $max = 84;
+
+                            $divClass = 'text-limit-amount';
+
+                            return new HtmlString("
+                                <div class='{$divClass} text-sm'>
+                                    目前字數：{$length} / {$max}
+                                </div>
+                            ");
+                        })
                     ])->locales(["zh_TW", "en"])
                     ->id("main")
                     ->columnSpanFull()->columns(3),
+                    
                     TextInput::make('order')->label("排序")->integer()->default(0),
                 ])->columns(3),
                 Section::make("SEO")->schema([
@@ -165,7 +211,7 @@ class NewsResource extends Resource
                                     ToolbarItem::BOLD, ToolbarItem::ITALIC, ToolbarItem::UNDERLINE,
                                     ToolbarItem::LINK, ToolbarItem::TEXT_COLOR, ToolbarItem::BACKGROUND_COLOR,
                                     ToolbarItem::SUBSCRIPT, ToolbarItem::LOWERCASE, ToolbarItem::DIVIDER,
-                                    ToolbarItem::UPPERCASE, ToolbarItem::CLEAR, ToolbarItem::HR
+                                    ToolbarItem::UPPERCASE, ToolbarItem::CLEAR, ToolbarItem::HR, ToolbarItem::FONT_FAMILY
                                 ])
                                 ->live(onBlur: true)
                                 ->columnSpanFull(),
@@ -179,7 +225,7 @@ class NewsResource extends Resource
                                     ToolbarItem::BOLD, ToolbarItem::ITALIC, ToolbarItem::UNDERLINE,
                                     ToolbarItem::LINK, ToolbarItem::TEXT_COLOR, ToolbarItem::BACKGROUND_COLOR,
                                     ToolbarItem::SUBSCRIPT, ToolbarItem::LOWERCASE, ToolbarItem::DIVIDER,
-                                    ToolbarItem::UPPERCASE, ToolbarItem::CLEAR, ToolbarItem::HR
+                                    ToolbarItem::UPPERCASE, ToolbarItem::CLEAR, ToolbarItem::HR, ToolbarItem::FONT_FAMILY
                                 ])
                                 ->columnSpanFull(),
                         ])->visible(fn (Get $get):bool => $get("paragraph_type") == 2),
@@ -253,7 +299,7 @@ class NewsResource extends Resource
                 TextColumn::make("newsCategory.name")->label("分類")->alignCenter(),
                 TextColumn::make("title")->label("標題")->alignCenter(),
                 TextColumn::make("written_by")->label("發佈者")->alignCenter(),
-                TextColumn::make("post_date")->label("發佈時間")->dateTime('Y/m/d')->alignCenter(),
+                TextColumn::make("post_date")->label("文章時間")->dateTime('Y/m/d')->alignCenter(),
                 ImageColumn::make("news_img_pc_url")->label("列表圖")->alignCenter(),
                 TextColumn::make("list_audit_state")->label("狀態")->badge()
                 ->color(fn (string $state): string => match ($state) {

public/css/malzariey/filament-lexical-editor/filament-lexical-editor-styles.css

@@ -6272,4 +6272,8 @@ button.font-increment {
 .dark\:invert:is(.dark *) {
   --tw-invert: invert(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
+div.relative.w-52.h-11.py-1:has(select.font-family) {
+  display: none !important;
 }