yico admin & api

app/Filament/Resources/NewsResource.php

                         Radio::make("paragraph_type")->options([
                             1 => "圖片",
                             2 => "文字",
-                            3 => "影音"
+                            3 => "影音",
                         ])->label("")->default(1)->Live(),
                         Group::make()->schema([
-                            Translate::make()->schema(fn (string $locale) => [
-                                TextInput::make('image_alt')->label("圖片註文")->columnSpan(1),
-                            ])->locales(["zh_TW", "en"])
-                            ->id(fn ($get) => "para_img_" . $get('item_key')),
-                            FileUpload::make('image_url')->label("")->disk("public")
-                            // ->helperText('建議寬高限制為:1080*675px，檔案大小限制為1M以下')->maxSize('1024')
-                            ->directory("news/paragraph"),
-                            TextInput::make('image_link')->label("外連網址")->columnSpanFull()->url(),
+                            Section::make('')->schema([
+                                Repeater::make("multiple_images")->schema([
+                                    TextInput::make('para_img_item_key')
+                                        ->default(fn () => Str::random())
+                                        ->hidden()
+                                        ->afterStateHydrated(function (TextInput $component, $state) {
+                                            if (empty($state)) {
+                                                $component->state(Str::random());
+                                            }
+                                        }),
+                                    Translate::make()->schema(fn (string $locale) => [
+                                        TextInput::make('image_alt')->label("圖片註文"),
+                                    ])->locales(["zh_TW", "en"])
+                                    ->id(fn ($get) => "para_img_mul_" . $get('para_img_item_key')),
+                                    FileUpload::make('image_url')->label("")->disk("public")
+                                    // ->helperText('建議寬高限制為:1080*675px，檔案大小限制為1M以下')->maxSize('1024')
+                                    ->directory("news/extraPhoto")
+                                    ->maxFiles(10),
+                                ])
+                                ->relationship("photos")
+                                ->label("")
+                                ->orderColumn('order')
+                            ])
                         ])->visible(fn (Get $get):bool => $get("paragraph_type") == 1),
                         Group::make()->schema([
                             Translate::make()->schema(fn (string $locale) => [
                                 ])
                                 ->fileAttachmentsDirectory('attachments')
                                 ->fileAttachmentsVisibility('private'),
-                            ])->locales(["zh_TW", "en"])
-                                ->id(fn ($get) => "para_text_" . $get('item_key')),
+                            ])
+                            ->locales(["zh_TW", "en"])
+                            ->id(fn ($get) => "para_text_" . $get('item_key')),
                         ])->visible(fn (Get $get):bool => $get("paragraph_type") == 2),
                             Group::make()->schema([
                                 Section::make("")->schema([
                                     ->disk("public")
                                     ->directory("news/paragraph/video"),
                                     // ->helperText('建議寬高限制為:2000*720px，出血寬度720px，主要圖像範圍為:1280*720px，檔案大小限制為1M以下')->maxSize('1024'),
+                                    Translate::make()->schema(fn (string $locale) => [
+                                        TextInput::make('video_img_alt')->label("圖片註文")->columnSpan(1),
+                                    ])->locales(["zh_TW", "en"])
+                                    ->id(fn ($get) => "para_video_img_alt_" . $get('item_key')),
                                     Radio::make("video_type")->label("")->options([
                                         1 => "網址",
                                         2 => "檔案"
                     ->orderColumn('order')
                     ->cloneable()
                 ]),
-                Section::make("額外圖片")->schema([
-                    Repeater::make("extra_images")->schema([
-                        FileUpload::make('image_url')->label("")->disk("public")
-                        ->directory("news/extraPhoto")
-                        ->maxFiles(10),
-                        TextInput::make('image_link')->label("外連網址")->columnSpanFull()->url(),
-                    ])
-                    ->helperText('至少需上傳4張圖片才會出現圖片輯')
-                    ->relationship("photos")
-                    ->label("")
-                    ->collapsible()
-                    ->orderColumn('order')
-                    ->defaultItems(0)
-                ])->columns(5)
             ]);
     }
 

app/Filament/Resources/NewsResource/Pages/CreateNews.php

     }
     protected function handleRecordCreation(array $data): Model
     {
+        $data["visible"] = 0;
         return static::getModel()::create($data);
     }
 }

app/Http/Controllers/Api/NewsController.php

 
     public function list(Request $request, $locate = 'tw')
     {
-        $categoryId = $request->input("categoryId", "");
         $page = $request->input("page", 1);
         $per_page = $request->input("per_page", 15);
+        $year = $request->input("year", -1);
+        $month = $request->input("month", -1);
         $locate = $locate == "tw" ? "zh_TW" : $locate;
         $result = [];
 
-        //年份清單
-        $yearList = News::select(DB::raw("DATE_FORMAT(post_date, '%Y') as years"))->distinct()->orderBy("years", "desc")->pluck("years");
-        $result["yearList"] = $yearList;
-
         //文章列表
         $news = News::where("visible", 1);
-        if($categoryId){
-            $news->where("news_category_id", $categoryId);
+        if($month > 0 || $year > 0){
+            $dateFilter = Carbon::now();
+            if($year > 0){
+                $dateFilter->setYear(intval($year));
+                if($month > 0){
+                    $dateFilter->setMonth(intval($month));
+                    $news = $news->whereBetween("post_date", [$dateFilter->copy()->startOfMonth(), $dateFilter->copy()->endOfMonth()]);
+                }else{
+                    $news = $news->whereBetween("post_date", [$dateFilter->copy()->startOfYear(), $dateFilter->copy()->endOfYear()]);
+                }
+            }
         }
         $news = $news->orderByDesc("order")->orderByDesc("post_date");
         $result["pagination"] = [
             $result["list"][] = [
                 "id" => $item->id,
                 "categoryId" => $item->newsCategory->id,
-                "category" => $item->newsCategory->getTranslation("name", $locate),
+                "category" => $item->newsCategory->getTranslation("name", $locate, false),
                 "postDate" => Carbon::parse($item->post_date)->format("Y.m.d"),
-                "title" => $item->getTranslation("title", $locate),
+                "title" => $item->getTranslation("title", $locate, false),
                 "imgPC" => $item->news_img_pc_url,
                 "imgMobile" => $item->news_img_mobile_url,
-                "written" => $item->getTranslation("written_by", $locate),
-                "description" => $item->getTranslation("description", $locate),
+                "written" => $item->getTranslation("written_by", $locate, false),
+                "description" => $item->getTranslation("description", $locate, false),
             ];
         }
         return response()->json(["data" => $result], 200);
         $result = [];
 
         //年份清單
-        $yearList = News::select(DB::raw("DATE_FORMAT(post_date, '%Y') as years"))->distinct()->orderBy("years", "desc")->pluck("years");
+        $yearList = News::select(DB::raw("DATE_FORMAT(post_date, '%Y/%m') as years"))->distinct()->orderBy("years", "desc")->pluck("years");
 
         //文章列表
-        $news = News::where("visible", 1);
-        if($categoryId){
-            $news->where("news_category_id", $categoryId);
-        }
-        $news = $news->where('on_top', 1)->first();
+        $news = News::where("visible", 1)->where('on_top', 1)->first();
+        if($news)
         $result["data"] = [
             "meta" => [
-                "meta_title" => $news->getTranslation("meta_title", $locate),
-                "meta_keyword" => $news->getTranslation("meta_keyword", $locate),
-                "meta_description" => $news->getTranslation("meta_description", $locate),
+                "meta_title" => $news->getTranslation("meta_title", $locate, false),
+                "meta_keyword" => $news->getTranslation("meta_keyword", $locate, false),
+                "meta_description" => $news->getTranslation("meta_description", $locate, false),
                 "imgPC" => $news->news_meta_img,
             ],
             "yearList" =>[
             "top" => [
                 "id" => $news->id,
                 "categoryId" => $news->newsCategory->id,
-                "category" => $news->newsCategory->getTranslation("name", $locate),
+                "category" => $news->newsCategory->getTranslation("name", $locate, false),
                 "postDate" => Carbon::parse($news->post_date)->format("Y/m/d"),
-                "title" => $news->getTranslation("title", $locate),
+                "title" => $news->getTranslation("title", $locate, false),
                 "imgPC" => $news->news_img_pc_url,
                 "imgMobile" => $news->news_img_mobile_url,
-                "written" => $news->getTranslation("written_by", $locate),
-                "description" => $news->getTranslation("description", $locate),
+                "written" => $news->getTranslation("written_by", $locate, false),
+                "description" => $news->getTranslation("description", $locate, false),
             ]
         ];
         return response()->json($result, 200);
         ->orderBy('post_date', 'desc')
         ->orderBy('id', 'desc')
         ->first();
+
         if($previous)$otherNewsList["previous"] = [
             "id" => $previous->id,
             "categoryId" => $previous->newsCategory->id,
-            "category" => $previous->newsCategory->getTranslation("name", $locate),
+            "category" => $previous->newsCategory->getTranslation("name", $locate, false),
             "postDate" => Carbon::parse($previous->post_date)->format("Y/m/d"),
-            "title" => $previous->getTranslation("title", $locate),
+            "title" => $previous->getTranslation("title", $locate, false),
             "imgPC" => $previous->news_img_pc_url,
             "imgMobile" => $previous->news_img_mobile_url,
-            "written" => $previous->getTranslation("written_by", $locate),
-            "description" => $previous->getTranslation("description", $locate),
+            "written" => $previous->getTranslation("written_by", $locate, false),
+            "description" => $previous->getTranslation("description", $locate, false),
         ];
         if($next)$otherNewsList["next"] = [
             "id" => $next->id,
             "categoryId" => $next->newsCategory->id,
-            "category" => $next->newsCategory->getTranslation("name", $locate),
+            "category" => $next->newsCategory->getTranslation("name", $locate, false),
             "postDate" => Carbon::parse($previous->post_date)->format("Y/m/d"),
-            "title" => $next->getTranslation("title", $locate),
+            "title" => $next->getTranslation("title", $locate, false),
             "imgPC" => $next->news_img_pc_url,
             "imgMobile" => $next->news_img_mobile_url,
-            "written" => $next->getTranslation("written_by", $locate),
-            "description" => $next->getTranslation("description", $locate),
+            "written" => $next->getTranslation("written_by", $locate, false),
+            "description" => $next->getTranslation("description", $locate, false),
         ];
 
 
+        // {
+        //     "type": "text",
+        //     "content": ""
+        // },
+        // {
+        //     "type": "image",
+        //     "images":[{"img_url":"", "alt":""}, {"img_url":"", "alt":""}]
+        // },
+        // {
+        //     "type": "video",
+        //     "is_yt":false,
+        //     "video_img_url":"",
+        //     "video_url":"",
+        //     "content": ""
+        // }
         $paragraphs = [];
         foreach($news->paragraphs as $paragraph){
-            $paragraphs[] = [
-                "type" => $paragraph->contentType(),
-                "imgUrl" => $paragraph->paragraph_img,
-                "imgOutLink" => $paragraph->image_link,
-                "alt" => $paragraph->getTranslation("image_alt", $locate),
-                "content" => nl2br($paragraph->getTranslation("text_content", $locate)),
-                "videoImg" => $paragraph->paragraph_video_img,
-                "videoType" => $paragraph->paragraph_video_type,
-                "link" => $paragraph->paragraph_video_url,
-            ];
-        }
-        $extraPhotos = [];
-        foreach($news->photos as $photo){
-            $extraPhotos[] = [
-                "imgUrl" => $photo->news_photo_img,
-                "imgOutLink" => $photo->image_link,
-            ];
+            $content = [];
+            switch ($paragraph->contentType()){
+                case "text":
+                    $paragraphs[] = [
+                        "type" => $paragraph->contentType(),
+                        "content" => nl2br($paragraph->getTranslation("text_content", $locate, false)),
+                    ];
+                    break;
+                case "image":
+                    $photos = $paragraph->photos;
+                    $images = [];
+                    foreach($photos as $photo){
+                        $images[] = ["img_url" => $photo->img_url, "alt" => $photo->getTranslation("image_alt", $locate, false)];
+                    }
+                    $paragraphs[] = [
+                        "type" => $paragraph->contentType(),
+                        "images" => $images,
+                    ];
+                    break;
+                case "video":
+                    $paragraphs[] = [
+                        "type" => $paragraph->contentType(),
+                        "video_img_url" => $paragraph->paragraph_video_img,
+                        "is_yt" => $paragraph->video_type == 1 ? true : false,
+                        "content" => $paragraph->getTranslation("video_img_alt", $locate, false),
+                        "video_url" => $paragraph->paragraph_video_url,
+                    ];
+                    break;
+            }
         }
         $result = [
             "categoryId" => $news->newsCategory->id,
-            "category" => $news->newsCategory->getTranslation("name", $locate),
+            "category" => $news->newsCategory->getTranslation("name", $locate, false),
             "postDate" => Carbon::parse($news->post_date)->format("Y/m/d"),
-            "title" => $news->getTranslation("title", $locate),
-            "description" => $news->getTranslation("description", $locate),
-            "written" => $news->getTranslation("written_by", $locate),
+            "title" => $news->getTranslation("title", $locate, false),
+            "description" => $news->getTranslation("description", $locate, false),
+            "written" => $news->getTranslation("written_by", $locate, false),
             "imgPC" => $news->news_img_pc_url,
             "imgMobile" => $news->news_img_mobile_url,
-            "metaTitle" => $news->getTranslation("meta_title", $locate),
-            "metaKeyword" => $news->getTranslation("meta_keyword", $locate),
-            "metaDesc" => $news->getTranslation("meta_description", $locate),
+            "metaTitle" => $news->getTranslation("meta_title", $locate, false),
+            "metaKeyword" => $news->getTranslation("meta_keyword", $locate, false),
+            "metaDesc" => $news->getTranslation("meta_description", $locate, false),
             "metaImg" => $news->meta_img,
             "paragraphs" => $paragraphs,
-            "photos" => $extraPhotos,
             "otherNews" => $otherNewsList
         ];
         return response()->json(["data" => $result], 200);

app/Models/News.php

     public function paragraphs(){
         return $this->hasMany(NewsParagraph::class)->orderBy('order');
     }
-
-    public function photos(){
-        return $this->hasMany(NewsPhoto::class)->orderBy("order");
-    }
     protected function newsImgPcUrl(): Attribute
     {
         return Attribute::make(

app/Models/NewsParagraph.php

 
     protected $guarded = ['id'];
     public $timestamps = false;
-    protected $appends = ['paragraph_img', 'paragraph_video_img', 'paragraph_video_type', 'paragraph_video_url'];
-    public $translatable = ['text_content', 'image_alt'];
+    protected $appends = ['paragraph_video_img', 'paragraph_video_type', 'paragraph_video_url'];
+    public $translatable = ['text_content', 'video_img_alt'];
 
     public function news(){
         return $this->belongsTo(News::class);
                 return "";
         }
     }
-    protected function paragraphImg(): Attribute
-    {
-        return Attribute::make(
-            get: fn ($value) => is_null($this->image_url) ? null :Storage::disk('public')->url($this->image_url),
-        );
+
+    public function photos(){
+        return $this->hasMany(NewsPhoto::class)->orderBy("order");
     }
+
     protected function paragraphVideoType(): Attribute
     {
         return Attribute::make(

app/Models/NewsPhoto.php

     protected $appends = ['news_photo_img'];
     public $translatable = ['image_alt'];
 
-    public function news(){
-        return $this->belongsTo(News::class);
+    public function paragraph(){
+        return $this->belongsTo(NewsParagraph::class);
     }
     protected function newsPhotoImg(): Attribute
     {

config/livewire.php

+<?php
+
+return [
+
+    /*
+    |---------------------------------------------------------------------------
+    | Class Namespace
+    |---------------------------------------------------------------------------
+    |
+    | This value sets the root class namespace for Livewire component classes in
+    | your application. This value will change where component auto-discovery
+    | finds components. It's also referenced by the file creation commands.
+    |
+    */
+
+    'class_namespace' => 'App\\Livewire',
+
+    /*
+    |---------------------------------------------------------------------------
+    | View Path
+    |---------------------------------------------------------------------------
+    |
+    | This value is used to specify where Livewire component Blade templates are
+    | stored when running file creation commands like `artisan make:livewire`.
+    | It is also used if you choose to omit a component's render() method.
+    |
+    */
+
+    'view_path' => resource_path('views/livewire'),
+
+    /*
+    |---------------------------------------------------------------------------
+    | Layout
+    |---------------------------------------------------------------------------
+    | The view that will be used as the layout when rendering a single component
+    | as an entire page via `Route::get('/post/create', CreatePost::class);`.
+    | In this case, the view returned by CreatePost will render into $slot.
+    |
+    */
+
+    'layout' => 'components.layouts.app',
+
+    /*
+    |---------------------------------------------------------------------------
+    | Lazy Loading Placeholder
+    |---------------------------------------------------------------------------
+    | Livewire allows you to lazy load components that would otherwise slow down
+    | the initial page load. Every component can have a custom placeholder or
+    | you can define the default placeholder view for all components below.
+    |
+    */
+
+    'lazy_placeholder' => null,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Temporary File Uploads
+    |---------------------------------------------------------------------------
+    |
+    | Livewire handles file uploads by storing uploads in a temporary directory
+    | before the file is stored permanently. All file uploads are directed to
+    | a global endpoint for temporary storage. You may configure this below:
+    |
+    */
+
+    'temporary_file_upload' => [
+        'disk' => null,        // Example: 'local', 's3'              | Default: 'default'
+        'rules' => 'max:512000',       // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
+        'directory' => null,   // Example: 'tmp'                      | Default: 'livewire-tmp'
+        'middleware' => null,  // Example: 'throttle:5,1'             | Default: 'throttle:60,1'
+        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs...
+            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
+            'mov', 'avi', 'wmv', 'mp3', 'm4a',
+            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
+        ],
+        'max_upload_time' => 5, // Max duration (in minutes) before an upload is invalidated...
+        'cleanup' => true, // Should cleanup temporary uploads older than 24 hrs...
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | Render On Redirect
+    |---------------------------------------------------------------------------
+    |
+    | This value determines if Livewire will run a component's `render()` method
+    | after a redirect has been triggered using something like `redirect(...)`
+    | Setting this to true will render the view once more before redirecting
+    |
+    */
+
+    'render_on_redirect' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Eloquent Model Binding
+    |---------------------------------------------------------------------------
+    |
+    | Previous versions of Livewire supported binding directly to eloquent model
+    | properties using wire:model by default. However, this behavior has been
+    | deemed too "magical" and has therefore been put under a feature flag.
+    |
+    */
+
+    'legacy_model_binding' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Auto-inject Frontend Assets
+    |---------------------------------------------------------------------------
+    |
+    | By default, Livewire automatically injects its JavaScript and CSS into the
+    | <head> and <body> of pages containing Livewire components. By disabling
+    | this behavior, you need to use @livewireStyles and @livewireScripts.
+    |
+    */
+
+    'inject_assets' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Navigate (SPA mode)
+    |---------------------------------------------------------------------------
+    |
+    | By adding `wire:navigate` to links in your Livewire application, Livewire
+    | will prevent the default link handling and instead request those pages
+    | via AJAX, creating an SPA-like effect. Configure this behavior here.
+    |
+    */
+
+    'navigate' => [
+        'show_progress_bar' => true,
+        'progress_bar_color' => '#2299dd',
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | HTML Morph Markers
+    |---------------------------------------------------------------------------
+    |
+    | Livewire intelligently "morphs" existing HTML into the newly rendered HTML
+    | after each update. To make this process more reliable, Livewire injects
+    | "markers" into the rendered Blade surrounding @if, @class & @foreach.
+    |
+    */
+
+    'inject_morph_markers' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Pagination Theme
+    |---------------------------------------------------------------------------
+    |
+    | When enabling Livewire's pagination feature by using the `WithPagination`
+    | trait, Livewire will use Tailwind templates to render pagination views
+    | on the page. If you want Bootstrap CSS, you can specify: "bootstrap"
+    |
+    */
+
+    'pagination_theme' => 'tailwind',
+];

database/migrations/2025_05_20_043735_create_news_paragraphs_table.php

             $table->id();
             $table->unsignedBigInteger('news_id')->index();
             $table->foreign('news_id')->references('id')->on('news')->comment("關聯文章");
-            $table->unsignedTinyInteger('paragraph_type')->comment('段落類型 1.image 2.text');
-            $table->string('image_url')->nullable()->comment("圖片網址");
-            $table->json('image_alt')->nullable()->comment("圖片註釋");
+            $table->unsignedTinyInteger('paragraph_type')->comment('段落類型 1.images 2.text 3.video');
             $table->json('text_content')->nullable()->comment("文字段落");
             $table->integer("video_type")->nullable();
             $table->string("video_img")->nullable();
+            $table->json('video_img_alt')->nullable()->comment("圖片註釋");
             $table->string("link")->nullable();
             $table->string("video_url")->nullable();
             $table->unsignedInteger('order')->default(0)->comment("排序");

database/migrations/2025_05_20_043736_create_news_photos_table.php

 
         Schema::create('news_photos', function (Blueprint $table) {
             $table->id();
-            $table->unsignedBigInteger('news_id')->index();
-            $table->foreign('news_id')->references('id')->on('news')->comment("關聯文章");
+            $table->unsignedBigInteger('news_paragraph_id')->index();
+            $table->foreign('news_paragraph_id')->references('id')->on('news_paragraphs')->comment("關聯文章段落");
             $table->string('image_url')->nullable()->comment("圖片網址");
             $table->json('image_alt')->nullable()->comment("圖片註釋");
             $table->unsignedInteger('order')->default(0)->comment("排序");