mama/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fc79148879fe6ad0c282562354aa3a672f09883d
star-cloud/.agents/skills/ui-minimal-luxury/SKILL.md
sky121113 fc79148879 [FEAT] 實作角色權限分類、租戶角控管理與介面多語系優化 
1. [FEAT] 權限劃分為「系統層級」與「客戶層級」，並在後端強制過濾跨權限分配。
2. [FEAT] 整合選單權限至主選單層級 (基本設定、權限設定)，簡化角色管理 UI。
3. [STYLE] 側邊欄優化：補齊多語系翻譯，並為基本設定子選單增加視覺圖示。
4. [REFACTOR] 更新 RoleSeeder，將 tenant-admin 重新分類為客戶層級角色。
2026-03-17 16:53:28 +08:00

16 KiB
Raw Blame History

name, description
name description
璆萇陛憟Ｚ虾憸<EFBFBD> UI 撖虫<E69296>閬讐<E996AC> (Minimal Luxury UI) 摰𡁶儔 Star Cloud 蝞∠<E89D9E>敺<EFBFBD>蝱<EFBFBD><E89DB1><EFBFBD>峕扔蝪∪失<E288AA>舫◢<E888AB>滩身閮<E8BAAB><E996AE>蝭<EFBFBD><E89DAD><EFBFBD><EFBFBD>鉄 CSS Tokens<6E><73>虜<EFBFBD>函<EFBFBD>隞嗆見撘譌<E69298><E8AD8C><EFBFBD><EFBFBD>急<EFBFBD><E680A5>𡏭<EFBFBD>鈭鍦<E988AD>璅∪<E79285>嚗𣬚Ⅱ靽嘥<E99DBD>蝡<EFBFBD> 15+ 璅∠<E79285><E288A0><EFBFBD><EFBFBD>閬箔<E996AC><E7AE94>湔<EFBFBD>扼<EFBFBD><E689BC>

璆萇陛憟Ｚ虾憸<EFBFBD> UI 撖虫<E69296>閬讐<E996AC> (Minimal Luxury UI)

<EFBFBD>祆<EFBFBD>隞嗅<EFBFBD>蝢拐<EFBFBD> Star Cloud 撠<><E692A0><EFBFBD><EFBFBD>瓲敹<E793B2><E695B9>閬箄<E996AC>閮<EFBFBD><E996AE><EFBFBD><EFBFBD><EFBFBD>㗇鰵<E39787><E9B0B5>𢒰<EFBFBD><F0A292B0><EFBFBD>隞園<E99A9E><E59C92>澆<EFBFBD><E6BE86><EFBFBD>𠂔<EFBFBD>潮<EFBFBD>摰<EFBFBD>迨閬讐<E996AC><E8AE90><EFBFBD>

1. <20>詨<EFBFBD>閮剛<E996AE>隞斤<E99A9E> (Design Tokens)

<EFBFBD>脣蔗蝟餌絞 (CSS Variables)

雿齿䲰 resources/css/app.css嚗<EFBFBD>

  • --color-luxury-deep: #0f172a (瘛梯𠧧<E6A2AF>峕艶)
  • --color-luxury-card: #1e293b (<28>∠<EFBFBD><E288A0>峕艶)
  • --color-accent: #06b6d4 (<28>坿𠧧暺䂿韌嚗屸<E59A97><E5B1B8>冽䲰<E586BD>厰<EFBFBD><E58EB0><EFBFBD><EFBFBD>蝷<EFBFBD>)

摮烾<EFBFBD> (Typography)

  • <EFBFBD>扳<EFBFBD>摮烾<EFBFBD>: Plus Jakarta Sans
  • 璅䠷<EFBFBD>/憿舐內摮烾<E691AE>: Outfit
  • <EFBFBD>寞<EFBFBD><EFBFBD>: 璅䠷<E79285><E4A0B7><EFBFBD>撣嗆<E692A3> letter-spacing: -0.02em 隞亙<E99A9E>撘瑞移撖<E7A7BB><E69296><EFBFBD><EFBFBD>

2. <20>詨<EFBFBD>蝯<EFBFBD>辣璅<E8BEA3><E79285>

鞊芾虾<EFBFBD>∠<EFBFBD> (Luxury Card)

<div class="luxury-card p-6 rounded-2xl animate-luxury-in">
    <!-- <20>批捆 -->
</div>
  • <EFBFBD>寞<EFBFBD>: <20>詨<EFBFBD><E8A9A8><EFBFBD>葆<EFBFBD><E89186> Y 頠詨像蝘餉<E89D98>瘛勗漲<E58B97>訫蔣<E8A8AB><E894A3>

<EFBFBD>湧<EFBFBD>撠舘汗<EFBFBD><EFBFBD> (Luxury Nav Item)

<a href="#" class="luxury-nav-item active">
    <i class="lucide-icon"></i>
    <span>蝭<EFBFBD>暺𧼮<EFBFBD>蝔<EFBFBD></span>
</a>
  • <EFBFBD>毺鍂<EFBFBD><EFBFBD><EFBFBD><EFBFBD>: 撌血<E6928C>撣嗆<E692A3><E59786>栞<EFBFBD><E6A09E>湔<EFBFBD><E6B994><EFBFBD>內<EFBFBD>剁<EFBFBD>銝西<E98A9D>隞仿<E99A9E><E4BBBF>脩䔄<E884A9>厰苊敶晞<E695B6><E6999E>

<EFBFBD>厰<EFBFBD>蝯<EFBFBD>辣 (Buttons)

  • Primary: .btn-luxury-primary (<28>坿𠧧瞍詨惜嚗屸<E59A97><E5B1B8>冽䲰撱箇<E692B1><E7AE87><EFBFBD><EFBFBD>摮<EFBFBD>)
  • Secondary: .btn-luxury-secondary (<28>質𠧧/瘛梯𠧧<E6A2AF>峕艶嚗<E889B6>葆<EFBFBD>𦠜<EFBFBD>嚗屸<E59A97><E5B1B8>冽䲰蝺刻摩<E588BB><E691A9>祟<EFBFBD><E7A59F>)
  • Ghost: .btn-luxury-ghost (<28>∟<EFBFBD><E2889F>荔<EFBFBD><E88D94>拍鍂<E68B8D>澆<EFBFBD>瘨<EFBFBD><E798A8><EFBFBD>䰻<EFBFBD>𧢲凒憭<E58792>)
<!-- Primary -->
<button class="btn-luxury-primary">
    <i class="lucide-plus size-4"></i>
    <span>撱箇<EFBFBD><EFBFBD>唳<EFBFBD><EFBFBD><EFBFBD></span>
</button>

<!-- Ghost -->
<button class="btn-luxury-ghost"><EFBFBD>𡝗<EFBFBD></button>

3. <20>閧𧞄<E996A7><F0A79E84><EFBFBD><EFBFBD><EFBFBD>

<EFBFBD>脣聦<EFBFBD>閧𧞄

  • .animate-luxury-in: <20><><EFBFBD>厩<EFBFBD>銝餃<E98A9D>摰孵<E691B0><E5ADB5><EFBFBD><EFBFBD><EFBFBD>∠<EFBFBD><E288A0>券<EFBFBD><E588B8>Ｚ<EFBFBD><EFBCBA>交<EFBFBD>嚗峕<E59A97><E5B395>瑕<EFBFBD><E79195>曹<EFBFBD><E69BB9>諹<EFBFBD><E8ABB9><EFBFBD>楚<EFBFBD>交<EFBFBD><E4BAA4>栶<EFBFBD><E6A0B6>

鈭鍦<EFBFBD><EFBFBD>擧腹 (Transitions)

  • 璅蹱<EFBFBD><EFBFBD><EFBFBD><EFBFBD>: <20><><EFBFBD>厩<EFBFBD><E58EA9>詨<EFBFBD><E8A9A8><EFBFBD>𠧧敶抵<E695B6><E68AB5>𤤿<EFBFBD><F0A4A4BF>擧腹<E693A7><E885B9><EFBFBD>嚗𣬚絞銝<E7B59E>撱箄降雿輻鍂 duration-300 (300ms)<29><>
  • 靘见<EFBFBD>: 璆萄<E79286>蝝啣凝<E595A3><E5879D><EFBFBD>𤩺<EFBFBD>摨西<E691A8><E8A5BF>硋虾蝮桃<E89DAE><E6A183><EFBFBD> 150ms嚗䔶<EFBFBD>瘨匧<EFBFBD><EFBFBD>峕艶<EFBFBD>脰<EFBFBD>雿滨宏<EFBFBD><EFBFBD><EFBFBD><EFBFBD>蓥<EFBFBD>敺衤誑 300ms <20>箸<EFBFBD><E7AEB8><EFBFBD>

Alpine.js 鈭鍦<E988AD>璅∪<E79285> (隞交<E99A9E><E4BAA4>㯄<EFBFBD><E3AF84><EFBFBD>膥<EFBFBD>箔<EFBFBD>)

  • 鈭鍦<EFBFBD><EFBFBD>笔<EFBFBD>: 暺墧<E69ABA>閫貊䔄銝𧢲<E98A9D><F0A7A2B2>詨鱓<E8A9A8><E9B193><EFBFBD>敹<EFBFBD><E695B9>雿輻鍂 x-transition 銝𥪜葆<F0A5AA9C><E89186> scale <20>讐宏<E8AE90><E5AE8F>

  • 璅<EFBFBD><EFBFBD>閬<EFBFBD><EFBFBD>: <20>詨鱓<E8A9A8>峕艶<E5B395><E889B6>雿輻鍂<E8BCBB>餌<EFBFBD><E9A48C>祆<EFBFBD> (Glassmorphism) <20>硋葆<E7A18B>𤩺<EFBFBD>摨衣<E691A8>瘛梯𠧧<E6A2AF>峕艶<E5B395><E889B6>

  • <EFBFBD>𡑒”雿<EFBFBD><EFBFBD>: <20>臬炏<E887AC>∠鍂<E288A0>峕㟲<E5B395><E39FB2><EFBFBD><EFBFBD>∠<EFBFBD><E288A0>滨<EFBFBD>瑽衤<E791BD><E8A1A4>扯<EFBFBD>閮剔<E996AE> p-8嚗<EFBFBD>

  • <EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>蜇<EFBFBD><EFBFBD>: <20>𡑒”摨閖<E691A8><E99696>臬炏甇<E7828F>Ⅱ<EFBFBD>砍<EFBFBD> vendor.pagination.luxury嚗<EFBFBD>

  • <EFBFBD><EFBFBD><EFBFBD><EFBFBD>脤<EFBFBD>: 蝚血<E89D9A>璅䠷<E79285> slate-900/white <20><><EFBFBD>蝐<EFBFBD> slate-500 <20><><EFBFBD>瘥𥪜漲<F0A5AA9C><E6BCB2>

  • <EFBFBD>航<EFBFBD><EFBFBD>扳炎<EFBFBD><EFBFBD>: 鈭𣬚<E988AD>鞈<EFBFBD><E99E88><EFBFBD>臬炏<E887AC>𥪜<EFBFBD> text-xs (12px) 銝娍<E98A9D><E5A88D>滢<EFBFBD>頞<EFBFBD><E9A09E> font-bold嚗<EFBFBD>

5. <20>讠䔄瘜冽<E7989C>鈭钅<E988AD> (Important Notes)

<EFBFBD><EFBFBD>銵㯄<EFBFBD><EFBFBD>嗅<EFBFBD>敹<EFBFBD>

  • CSS 蝺刻陌: 銴<><E98AB4><EFBFBD><EFBFBD> box-shadow <20>𡝗撓撅斗<E69285><E69697>湔𦻖撖怠<E69296><E680A0><EFBFBD> CSS 撅祆<E69285>改<EFBFBD><E694B9>踹<EFBFBD><E8B8B9><EFBFBD> @apply 銝凋蝙<E5878B>典葆蝛箸聢<E7AEB8><E881A2>彍<EFBFBD>澆<EFBFBD><E6BE86>渡楊霅臬仃<E887AC>梹<EFBFBD>閰唾<E996B0> KI: tailwind-luxury-ui-patterns嚗剹<EFBFBD><EFBFBD>
  • 瘛梯𠧧璅∪<EFBFBD>: 鈭鍦<E988AD>撘𤩺<E69298><F0A4A9BA>訫銁瘛梯𠧧璅∪<E79285>銝见<E98A9D><E8A781><EFBFBD>撥<EFBFBD>𡝗<EFBFBD>摮𦯀漁摨佗<E691A8>dark:text-white嚗㚁<EFBFBD>銝西<EFBFBD>隞仿<EFBFBD><EFBFBD>脩䔄<EFBFBD>㗇<EFBFBD><EFBFBD>栶<EFBFBD><EFBFBD>

<EFBFBD>單<EFBFBD><EFBFBD>閙<EFBFBD><EFBFBD><EFBFBD>𣶹閬讐<EFBFBD>

  • <EFBFBD>澆<EFBFBD>: #璈笔蝱蝺刻<E89DBA> <20>蓥<EFBFBD><E893A5>批捆 (靘见<E99D98> #V-001 <20>瑁<EFBFBD><E79181>箄疏)<29><>
  • <EFBFBD><EFBFBD>窗: 敹<><E695B9><EFBFBD><EFBFBD>𣶹<EFBFBD>詨<EFBFBD><E8A9A8><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>唬<EFBFBD>蝵柴<E89DB5><E69FB4>

6. <20><>𢒰雿<F0A292B0><E99BBF>閬讐<E996AC> (Page Layout)

雿<EFBFBD><EFBFBD>瘙箇<EFBFBD>閬誩<EFBFBD> (Layout Decision Rules)

<EFBFBD>寞<EFBFBD>蝭拚<EFBFBD>璇苷辣<EFBFBD><EFBFBD><EFBFBD><EFBFBD>𦦵<EFBFBD>摨佗<EFBFBD><EFBFBD>豢<EFBFBD><EFBFBD>拍訜<EFBFBD><EFBFBD><EFBFBD><EFBFBD>桅<EFBFBD><EFBFBD>Ｖ<EFBFBD>撅<EFBFBD>嚗<EFBFBD>

1. <20>游<EFBFBD>撘譍<E69298>撅<EFBFBD> (Integrated Layout) - <20>鞾<EFBFBD>閮剜綫<E5899C>艾<EFBFBD><E889BE>

  • <EFBFBD>拍鍂<EFBFBD>湔艶: 蝯訫之憭𡁏彍 CRUD <20>𡑒”<F0A19192><E2809D>
  • 撖虫<EFBFBD><EFBFBD>孵<EFBFBD>: 蝭拚<E89DAD><E68B9A>具<EFBFBD><E585B7>極<EFBFBD>瑕<EFBFBD><E79195><EFBFBD><EFBFBD><EFBFBD>躰”<E8BAB0>澆<EFBFBD><E6BE86>典<EFBFBD>鋆嘥銁<E598A5>䔶<EFBFBD><E494B6><EFBFBD> luxury-card 銝准<E98A9D><E58786>
  • <EFBFBD>扯<EFBFBD>閬讐<EFBFBD>: 撘瑕<E69298>雿輻鍂 p-8 隞亦㬢敺埈<E695BA>雿喟征瘞<E5BE81><E7989E><EFBFBD><EFBFBD>
  • <EFBFBD><EFBFBD>辣<EFBFBD>栞<EFBFBD>: 蝭拚<E89DAD><E68B9A><EFBFBD><EFBFBD><EFBFBD>”<EFBFBD>潔<EFBFBD><E6BD94>枏𤐄摰帋蝙<E5B88B><E89D99> mb-10<EFBFBD><EFBFBD>
  • 蝭<EFBFBD><EFBFBD>: 撣唾<E692A3>蝞∠<E89D9E><E288A0><EFBFBD><EFBFBD><EFBFBD>脰身摰𠾼<E691B0><F0A0BEBC><EFBFBD><EFBFBD>唳𠯫隤䎚<E99AA4><E48E9A>

2. <20><>𣪧撘譍<E69298>撅<EFBFBD> (Split Layout)

  • <EFBFBD>拍鍂<EFBFBD>湔艶: 銴<><E98AB4><EFBFBD>亥岷 (Filtered Fields >= 3 <20>硋<EFBFBD>銵𣬚祟<F0A3AC9A><E7A59F>)<29><>
  • 撖虫<EFBFBD><EFBFBD>孵<EFBFBD>: 蝭拚<E89DAD><E68B9A><EFBFBD><EFBFBD>函<EFBFBD><E587BD>箔<EFBFBD><E7AE94><EFBFBD> luxury-card嚗䔶<EFBFBD><EFBFBD>寥<EFBFBD><EFBFBD><EFBFBD> mb-6 敺<><E695BA><EFBFBD>曄蔭鞈<E894AD><E99E88>皜<EFBFBD>鱓<EFBFBD>∠<EFBFBD><E288A0><EFBFBD>
  • 璅<EFBFBD><EFBFBD>閬讐<EFBFBD>: 蝭拚<E89DAD><E68B9A>∠<EFBFBD><E288A0>𡁜虜雿輻鍂 p-6嚗<EFBFBD><EFBFBD>皝𠰴<EFBFBD>嚗㚁<EFBFBD>皜<EFBFBD>鱓<EFBFBD>∠<EFBFBD>雿輻鍂 p-8嚗<EFBFBD>祝擛<EFBFBD><EFBFBD>嚗剹<EFBFBD><EFBFBD>
  • 蝭<EFBFBD><EFBFBD>: 鈭斗<E988AD>蝝<EFBFBD><E89D9D><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>唳𠯫隤䎚<E99AA4><E48E9A>

璅蹱<EFBFBD>撖祉<EFBFBD>雿<EFBFBD><EFBFBD> (Wide Layout)

@section('content')
<div class="space-y-6">
    <!-- Header: 璅䠷<E79285><E4A0B7><EFBFBD><EFBFBD>雿𨀣<E99BBF><F0A880A3><EFBFBD> -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
        <div>
            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Title') }}</h1>
            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Subtitle') }}</p>
        </div>
        <div class="flex items-center gap-3">
            <button class="btn-luxury-primary">...</button>
        </div>
    </div>

    <!-- Main Container: <20>∠<EFBFBD><E288A0><EFBFBD>”<EFBFBD><E2809D> -->
    <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <!-- Table Content -->
            </table>
        </div>
    </div>
</div>
@endsection

雿<EFBFBD><EFBFBD><EFBFBD>詨<EFBFBD><EFBFBD>笔<EFBFBD>:

  1. 蝘駁膄<EFBFBD>滩<EFBFBD><EFBFBD>扯<EFBFBD>: <20>孵捆<E5ADB5><E68D86> div <20><>蝳<EFBFBD>迫雿輻鍂 p-6 <20><> p-10嚗<EFBFBD><EFBFBD><EFBFBD>箔<EFBFBD>撅<EFBFBD><EFBFBD>箏<EFBFBD>撌脫<EFBFBD>靘𥕦抅蝷𡡞<EFBFBD>頝腈<EFBFBD><EFBFBD><EFBFBD>雿輻鍂 space-y-6 (<28><> space-y-8) <20>批<EFBFBD><E689B9><EFBFBD>憛𢠃<E6869B><F0A2A083>踺<EFBFBD><E8B8BA>
  2. 銝餃捆<EFBFBD>冽見撘<EFBFBD>: 撘瑕<E69298>撠漤<E692A0><E6BCA4><EFBFBD> luxury-card rounded-3xl p-8<EFBFBD><EFBFBD>
  3. 璅䠷<EFBFBD><EFBFBD>垍<EFBFBD>:
    • 銝餅<EFBFBD>憿屸<EFBFBD><EFBFBD>厩鍂 font-display (Outfit)<29><>
    • <EFBFBD>讛膩<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>厩鍂 uppercase tracking-widest font-bold 隞亙<E99A9E><E4BA99>暸<EFBFBD>蝝朞身閮<E8BAAB><E996AE><EFBFBD><EFBFBD>

7. 銵典鱓<E585B8><E9B193>辣閬讐<E996AC> (Form Elements)

<EFBFBD>嘥<EFBFBD>頛詨<EFBFBD>獢<EFBFBD><EFBFBD>銝𧢲<EFBFBD><EFBFBD>詨鱓嚗<EFBFBD>撥<EFBFBD>嗡蝙<EFBFBD>其誑銝钅<EFBFBD><EFBFBD>乩誑蝣箔<EFBFBD>瘛梯𠧧璅∪<EFBFBD>鞈芣<EFBFBD><EFBFBD><EFBFBD>

頛詨<EFBFBD>獢<EFBFBD><EFBFBD><EFBFBD>詨鱓

  • 憿𧼮ê̌: .luxury-input, .luxury-select
  • <EFBFBD>寞<EFBFBD><EFBFBD>:
    • 瘛梯𠧧璅∪<EFBFBD>銝见<EFBFBD><EFBFBD>坔<EFBFBD><EFBFBD>𤩺<EFBFBD><EFBFBD>峕艶<EFBFBD><EFBFBD><EFBFBD><EFBFBD>舀芋蝟𦠜<EFBFBD><EFBFBD>栶<EFBFBD><EFBFBD>
    • 蝯曹<EFBFBD><EFBFBD><EFBFBD> rounded-xl <20>栞<EFBFBD><E6A09E><EFBFBD> font-bold 摮烾<E691AE><E783BE><EFBFBD>
    • <EFBFBD>𡁶<EFBFBD><EFBFBD><EFBFBD>葆<EFBFBD>厰<EFBFBD><EFBFBD><EFBFBD> (Cyan) <20>澆<EFBFBD><E6BE86>𦠜<EFBFBD><F0A6A09C><EFBFBD>
<input type="text" class="luxury-input" placeholder="隢贝撓<E8B49D>亙<EFBFBD>摰<EFBFBD>">

<select class="luxury-select">
    <option value="1"><EFBFBD>毺鍂</option>
    <option value="0">蝳<EFBFBD>鍂</option>
</select>

8. 蝺刻摩<E588BB><E691A9>底<EFBFBD><E5BA95><EFBFBD>閬讐<E996AC> (Detail & Edit Views)

<EFBFBD>箔<EFBFBD>霈枏<EFBFBD>撅方<EFBFBD>閮𦠜凒<EFBFBD>瑁<EFBFBD>閬箏<EFBFBD>撠𠬍<EFBFBD><EFBFBD><EFBFBD><EFBFBD>见<EFBFBD>憛<EFBFBD> (Section) <20><><EFBFBD>蝷箸<E89DB7><E7AEB8>∠鍂銝滚<E98A9D><E6BB9A><EFBFBD><EFBFBD><EFBFBD>脫<EFBFBD>鞊～<E99E8A><EFBD9E>

<EFBFBD><EFBFBD>憛𠰴<EFBFBD>蝷箄𠧧敶拇<EFBFBD>鞊<EFBFBD> (Section Icon Palette)

  • <EFBFBD>箸𧋦鞈<EFBFBD><EFBFBD> (Basic Info): 蝧删<EFBFBD><EFBFBD><EFBFBD> (Emerald)<EFBFBD><EFBFBD>誨銵冽瓲敹<EFBFBD><EFBFBD><EFBFBD>帘摰朞<EFBFBD>韏琿<EFBFBD><EFBFBD><EFBFBD>
    • 璅<EFBFBD><EFBFBD>: bg-emerald-500/10 text-emerald-500
  • 蝖祇<EFBFBD>/<2F>埝局閮剖<E996AE>: <EFBFBD>亦<EFBFBD><EFBFBD><EFBFBD> (Amber/Orange)<EFBFBD><EFBFBD>誨銵典<EFBFBD>雿栶<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>𦻖<EFBFBD><EFBFBD>′擃磰郎<EFBFBD>𨳍<EFBFBD><EFBFBD>
    • 璅<EFBFBD><EFBFBD>: bg-amber-500/10 text-amber-500
  • 蝟餌絞/<2F>脤<EFBFBD>閮剖<E996AE>: <EFBFBD>𥡝<EFBFBD><EFBFBD><EFBFBD> (Indigo)<EFBFBD><EFBFBD>誨銵券<EFBFBD>頛胯<EFBFBD><EFBFBD><EFBFBD><EFBFBD>鞱<EFBFBD>瘛勗惜<EFBFBD>滨蔭<EFBFBD><EFBFBD>
    • 璅<EFBFBD><EFBFBD>: bg-indigo-500/10 text-indigo-500
  • <EFBFBD>梢麬/蝘駁膄<E9A781>蓥<EFBFBD>: <EFBFBD>怎麯蝝<EFBFBD> (Rose)<EFBFBD><EFBFBD>誨銵函聦憯墧<EFBFBD>扳<EFBFBD>雿栶<EFBFBD><EFBFBD>
    • 璅<EFBFBD><EFBFBD>: bg-rose-500/10 text-rose-500

## 8. 鞈<><E99E88>銵冽聢閬讐<E996AC> (Data Tables)

<0A>箔<EFBFBD>蝣箔<E89DA3>蝞∠<E89D9E>敺<EFBFBD>蝱鞈<E89DB1><E99E88><EFBFBD><EFBFBD>虾霈<E899BE><E99C88>扯<EFBFBD>蝎曉<E89D8E><E69B89><EFBFBD><EFBFBD>銵冽聢<E586BD>抒<EFBFBD><E68A92><EFBFBD><EFBFBD>㗇<EFBFBD>摮㛖<E691AE><E39B96>亙<EFBFBD><E4BA99><EFBFBD><EFBFBD>朣𠹺誑銝贝<E98A9D>蝭<EFBFBD><E89DAD>

### <20><><EFBFBD>憭批<E686AD><E689B9><EFBFBD><EFBFBD><EFBFBD><EFBFBD> (Typography Hierarchy)
- **銵券<E98AB5> (Table Header)**: 
  - 憿𧼮ê̌: `text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em]`
  - 雿𦦵鍂: <20>𣂷<EFBFBD>皜<EFBFBD>苊<EFBFBD><E88B8A><EFBFBD>雿滚<E99BBF>蝢抵<E89DA2>䔶<EFBFBD>憟芸<E6869F>鞈<EFBFBD><E99E88>閬𤥁死<F0A4A581>阡<EFBFBD><E998A1><EFBFBD><EFBFBD><EFBFBD>躰雲憭惩<E686AD>瘥𥪜漲<F0A5AA9C><E6BCB2>
- **銝餅<E98A9D>憿<EFBFBD> (Primary Item)**: 
  - 憿𧼮ê̌: `text-base font-extrabold text-slate-800 dark:text-slate-100`
  - 蝭<><E89DAD>: <20>砍虬<E7A08D>滨迂<E6BBA8><E8BF82><EFBFBD>擃𥪜<E69383>蝔晞<E89D94><E6999E>
- **甈∟<E79488>鞈<EFBFBD><E99E88> (Secondary Info)**: 
  - 憿𧼮ê̌: `text-xs font-bold text-slate-500 dark:text-slate-400 tracking-wide`
  - 蝭<><E89DAD>: 雿輻鍂<E8BCBB><E98D82>董<EFBFBD>麄<EFBFBD><E9BA84><EFBFBD>閮颯<E996AE><E9A2AF><EFBFBD><EFBFBD>𣂼<EFBFBD>蝔晞<E89D94><E6999E>
- **<2A><><EFBFBD>𧢲<EFBFBD>蝐<EFBFBD> (Status Badge)**: 
  - 蝭<><E89DAD>: <20>毺鍂 (`emerald`)<29><><EFBFBD><EFBFBD><EFBFBD> (`rose`) / 閫坿𠧧<E59DBF>滨迂 (`sky`/`indigo`)<29><>
  - <20>寞<EFBFBD><E5AF9E>: `px-2.5 py-1 rounded-lg text-xs font-bold border tracking-wider`

### 蝛粹<E89D9B><E7B2B9><EFBFBD><EFBFBD><EFBFBD><EFBFBD> (Spacing & Interaction)
- **<2A>桀<EFBFBD><E6A180>澆<EFBFBD>頝<EFBFBD>**: 蝯曹<E89DAF>雿輻鍂 `px-6 py-6`<60><>
- **<2A>詨<EFBFBD><E8A9A8>齿<EFBFBD>**: 敹<><E695B9><EFBFBD><EFBFBD> `tr` 憟㛖鍂 `group` 銝𥪜<E98A9D><F0A5AA9C><EFBFBD><EFBFBD>憟㛖鍂 `group-hover:bg-slate-50/80` (瘛梯𠧧: `dark:group-hover:bg-slate-800/40`) 隞交<E99A9E>靘偦<E99D98>蝝𡁶<E89D9D>鈭鍦<E988AD><E98DA6>毺䰻<E6AFBA><E4B0BB>
- **<2A>𣇉內摰孵膥<E5ADB5>詨<EFBFBD> (Icon Hover Palette)**:
    - <20>𡑒”撌血<E6928C><E8A180><EFBFBD>蜓<EFBFBD>𣇉內摰孵膥<E5ADB5><E886A5> `group-hover` <20><><EFBFBD><EFBFBD>厩眏瘛∟𠧧<E2889F>峕艶頧厩<E9A0A7> **撖阡<E69296>銝駁<E98A9D><E9A781><EFBFBD>**<2A><>
    - 憿𧼮ê̌: `group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300`<60><>
- **<2A><><EFBFBD><EFBFBD>峕郊霈𡃏𠧧**:
    - 銝餅<E98A9D>憿峕<E686BF>摮堒銁 `group-hover` <20><><EFBFBD><EFBFBD>峕郊霈𡃏𠧧嚗䔶誑撘瑕<E69298>暺墧<E69ABA>撘訫<E69298><E8A8AB><EFBFBD>
    - 憿𧼮ê̌: `group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors`<60><>

### <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>銵冽綉<E586BD>園<EFBFBD> (Pagination & Controls)
<0A>箔<EFBFBD>蝬剜<E89DAC><E5899C>滢<EFBFBD>銝<EFBFBD><E98A9D>湔<EFBFBD>改<EFBFBD><E694B9><EFBFBD><EFBFBD>匧<EFBFBD>銵函<E98AB5><E587BD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>𤤿<EFBFBD>隞嗅<E99A9E><E59785><EFBFBD><EFBFBD>敺芯誑銝卝<E98A9D>𥴰uxury Jump<6D>齿芋撘𧶏<E69298>
- **蝯曹<E89DAF>擃睃漲**: <20><><EFBFBD>㗇綉<E39787>園<EFBFBD>嚗<EFBFBD><E59A97><EFBFBD>𨰻<EFBFBD><F0A8B0BB><EFBFBD><EFBFBD>厰<EFBFBD><E58EB0>殷<EFBFBD><E6AEB7>箏<EFBFBD><E7AE8F><EFBFBD> `h-9` (36px)<29><>
- **蝑<>彍<EFBFBD><E5BD8D><EFBFBD> (Limit Selector)**: 
  - 閬讐<E996AC>: **蝳<>迫**<2A>刻”<E588BB>潔<EFBFBD><E6BD94>對<EFBFBD>Header/Toolbar嚗厰<E59A97>銴<EFBFBD>𦆮蝵桃<E89DB5><E6A183>詨<EFBFBD><E8A9A8>偦<EFBFBD><E581A6>柴<EFBFBD><E69FB4>絞銝<E7B59E><E98A9D>嗥<EFBFBD><E597A5>澆<EFBFBD><E6BE86>典<EFBFBD><E585B8><EFBFBD><EFBFBD>雿溻<E99BBF><E6BABB>
- **<2A><><EFBFBD>撠舘⏛ (Luxury Jump)**:
  - 璅∪<E79285>: <20>冽<EFBFBD><E586BD>喟絞<E5969F><E7B59E>Ⅳ<EFBFBD>厰<EFBFBD>嚗<EFBFBD><E59A97>蝡舐絞銝<E7B59E>雿輻鍂<E8BCBB>諹歲頧厰<E9A0A7><E58EB0>柴<EFBFBD>溻<EFBFBD><E6BABB>
  - 撖砍漲: 銝𧢲<E98A9D><F0A7A2B2>詨鱓<E8A9A8>折<EFBFBD> Padding <20><> `pl-4 pr-10`<60><>
  - 摮烾<E691AE>: 雿輻鍂 `text-xs font-black tracking-widest`<60><>
- **<2A><>內<EFBFBD><E585A7><EFBFBD>**:
  - 銵<><E98AB5>蝡舫黸<E888AB>誩<EFBFBD>擗䁅<E69397>敶辷<E695B6><E8BEB7><EFBFBD><EFBFBD><EFBFBD>踺<EFBFBD><E8B8BA>1 - 10 / 50<35>齿聢撘譌<E69298><E8AD8C>
  - <20>詨<EFBFBD>憿讛𠧧撠漤<E692A0> `text-slate-600` (瘛梯𠧧: `text-slate-300`)<29><>

### 摨閖<E691A8>皜<EFBFBD>鱓<EFBFBD>批<EFBFBD><E689B9><EFBFBD> (Bottom List Controls)
<0A>箔<EFBFBD>蝣箔<E89DA3><E7AE94>瑕<EFBFBD>銵函<E98AB5><E587BD>滢<EFBFBD>靘踹⏚嚗峕<E59A97><E5B395>桀<EFBFBD><E6A180>### 璅蹱<E79285><E8B9B1>滢<EFBFBD><E6BBA2>厰<EFBFBD> (Standard Action Icons)
銵冽聢<E586BD>抒<EFBFBD><E68A92>滢<EFBFBD>甈<EFBFBD><E79488>嚗<EFBFBD><E59A97><EFBFBD>𣬚楊頛胯<E9A09B>溻<EFBFBD><E6BABB><EFBFBD><EFBFBD>⏛<EFBFBD>扎<EFBFBD>溻<EFBFBD><E6BABB><EFBFBD>諹底<E8ABB9><E5BA95><EFBFBD>㵪<EFBFBD>敹<EFBFBD><E695B9>雿輻鍂隞乩<E99A9E>摰𡁶儔銋<E58494> **<2A>屸<EFBFBD><E5B1B8>烐<EFBFBD>皞<EFBFBD> (Gold Standard)<29><>**嚗<>

- **<2A>勗<EFBFBD>璅<EFBFBD><E79285>**: 
    - 摰孵膥: `p-2 rounded-lg bg-slate-50 dark:bg-slate-800`
    - 銝餉𠧧: `text-slate-400`
    - <20>𦠜<EFBFBD>: `border border-transparent` (<28>脤<EFBFBD><E884A4>滩<EFBFBD><E6BBA9><EFBFBD>)
    - <20>擧腹: `transition-all` (雿輻鍂<E8BCBB>鞱身<E99EB1>笔漲隞亦Ⅱ靽苷<E99DBD><E88BB7>賣<EFBFBD>)
    - <20>𣇉內蝎㛖敦: `stroke-width="2.5"`
    - 撠箏站: `w-4 h-4`

- **蝺刻摩<E588BB>厰<EFBFBD> (Edit)**:
    - <20>詨<EFBFBD><E8A9A8>寞<EFBFBD>: `hover:text-cyan-500 hover:bg-cyan-500/5 hover:border-cyan-500/20`
    - SVG 頝臬<E9A09D>: 
    ```html
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
    ```

- **<2A>亦<EFBFBD>閰單<E996B0> (View/Detail)**:
    - <20>詨<EFBFBD><E8A9A8>寞<EFBFBD>: `hover:text-indigo-500 hover:bg-indigo-500/5 hover:border-indigo-500/20`
    - SVG 頝臬<E9A09D>:
    ```html
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/></svg>
    ```

- **<2A>芷膄<E88AB7>厰<EFBFBD> (Delete)**:
    - <20>詨<EFBFBD><E8A9A8>寞<EFBFBD>: `hover:text-rose-500 hover:bg-rose-500/5 hover:border-rose-500/20`
    - SVG 頝臬<E9A09D>:
    ```html
    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
    ```
y items-center gap-2">...</button>
        </div>
    </div>

    <!-- 2. Main Integrated Card -->
    <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
        <!-- Toolbar & Filters (mb-10) -->
        <div class="flex items-center justify-between mb-10">
            <form class="relative group">
                <!-- <20><><EFBFBD><EFBFBD>蹱<EFBFBD>撠𧢲<E692A0><F0A7A2B2>硋<EFBFBD>閬<EFBFBD><E996AC><EFBFBD>擧蕪<E693A7>剁<EFBFBD>蝳<EFBFBD>迫<EFBFBD>滩<EFBFBD>蝑<EFBFBD>彍<EFBFBD><E5BD8D><EFBFBD> -->
                <input type="text" class="luxury-input pl-12 pr-6 w-64" placeholder="{{ __('Search...') }}">
            </form>
        </div>

        <!-- Scrollable Table Area -->
        <div class="overflow-x-auto">
            <table class="w-full text-left border-separate border-spacing-y-0">
                <thead>
                    <tr class="bg-slate-50/50 dark:bg-slate-900/10">
                        <th class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">{{ __('Name') }}</th>
                        <th class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Action') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
                    <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
                        <td class="px-6 py-6 font-extrabold text-slate-800 dark:text-slate-100 italic">Example Name</td>
                        <td class="px-6 py-6 text-right"> <!-- Action row --> </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 3. Standard Pagination Footer (mt-8) -->
        <div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
            {{ $items->links('vendor.pagination.luxury') }}
        </div>
    </div>
</div>

皜<EFBFBD>鱓甈<EFBFBD><EFBFBD>閬讐<EFBFBD> (Column Visibility & Standards)

  • <EFBFBD>箏<EFBFBD>甈<EFBFBD><EFBFBD>: 蝚砌<E89D9A>甈<EFBFBD><E79488>𡁜虜<F0A1819C>箝<EFBFBD>屸<EFBFBD><E5B1B8>菜<EFBFBD>霅塩<E99C85>㵪<EFBFBD>憒<EFBFBD> ID <20>𡝗<EFBFBD><F0A19D97>橒<EFBFBD>嚗峕<E59A97><E5B395>瑕<EFBFBD><E79195>寞<EFBFBD>摮烾<E691AE>璅<EFBFBD><E79285><EFBFBD><EFBFBD>
  • <EFBFBD>滢<EFBFBD>甈<EFBFBD><EFBFBD>: 蝯曹<E89DAF>雿齿䲰銵冽聢<E586BD><E881A2><EFBFBD>喟垢嚗䔶蒂<E494B6>賢<EFBFBD><E8B3A2><EFBFBD> Action (<28><> <EFBFBD>滢<EFBFBD>)嚗峕<E59A97>憿諹<E686BF><E8ABB9>批捆<E689B9><E68D86><EFBFBD> text-right<EFBFBD><EFBFBD>

9. 蝟餌絞<E9A48C>澆捆<E6BE86>扯<EFBFBD>璅蹱<E79285><E8B9B1><EFBFBD> (Compatibility & Standardization)

<EFBFBD>箔<EFBFBD>蝣箔<EFBFBD><EFBFBD>其<EFBFBD><EFBFBD>𣬚<EFBFBD><EFBFBD>祉<EFBFBD><EFBFBD>讠䔄<EFBFBD>啣<EFBFBD>銝哨<EFBFBD>憒<EFBFBD>𤌍<EFBFBD>滚<EFBFBD>獢<EFBFBD>蝙<EFBFBD>函<EFBFBD> Tailwind CSS v3.1嚗务I <20>質<EFBFBD>甇<EFBFBD>Ⅱ<EFBFBD><E285A1>𣶹嚗䔶蒂蝬剜<E89DAC><E5899C>函<EFBFBD><E587BD>滢<EFBFBD><E6BBA2>煺<EFBFBD><E785BA>湛<EFBFBD>敹<EFBFBD><E695B9><EFBFBD>萄<EFBFBD>隞乩<E99A9E>憿滚<E686BF>閬讐<E996AC><E8AE90><EFBFBD>

Tailwind CSS <20><>𧋦<EFBFBD>澆捆<E6BE86><E68D86> (v3.1)

  • 蝳<EFBFBD>迫雿輻鍂 size- 撅祆<E69285><E7A586>: <20>羓<EFBFBD>銝齿𣈲<E9BDBF><F0A388B2> size-4 蝑㕑<E89D91>瘜𤏪<E7989C>隢衤<E99AA2>敺见<E695BA><E8A781><EFBFBD>神雿<E7A59E> w-4 h-4<EFBFBD><EFBFBD>
  • <EFBFBD>踹<EFBFBD><EFBFBD>墧<EFBFBD>皞㚚<EFBFBD>頝<EFBFBD>: <20>踹<EFBFBD>雿輻鍂 4.5 (18px) 蝑劐遙<E58A90>誩<EFBFBD>潘<EFBFBD><E6BD98>芸<EFBFBD>雿輻鍂璅蹱<E79285>蝑厩<E89D91>憒<EFBFBD> 4 (16px) <20><> 5 (20px)<29><>

璅蹱<EFBFBD><EFBFBD>滢<EFBFBD><EFBFBD>厰<EFBFBD> (Standard Action Icons)

銵冽聢<EFBFBD>抒<EFBFBD><EFBFBD>滢<EFBFBD>甈<EFBFBD><EFBFBD>嚗<EFBFBD><EFBFBD><EFBFBD>𣬚楊頛胯<EFBFBD>溻<EFBFBD><EFBFBD><EFBFBD><EFBFBD>⏛<EFBFBD>扎<EFBFBD>㵪<EFBFBD>敹<EFBFBD><EFBFBD>雿輻鍂隞乩<EFBFBD>摰𡁶儔銋𧢲<EFBFBD>皞吔<EFBFBD>

  • <EFBFBD>勗<EFBFBD>璅<EFBFBD><EFBFBD>:

    • 摰孵膥: p-2 rounded-lg bg-slate-50 dark:bg-slate-800
    • 銝餉𠧧: text-slate-400
    • <EFBFBD>𣇉內蝎㛖敦: stroke-width="2.5"
    • 撠箏站: w-4 h-4

  • 蝺刻摩<EFBFBD>厰<EFBFBD> (Edit):

    • <EFBFBD>詨<EFBFBD><EFBFBD>寞<EFBFBD>: hover:text-cyan-500 hover:bg-cyan-500/10 hover:border-cyan-500/20
    • SVG 頝臬<E9A09D>:
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>

  • <EFBFBD>芷膄<EFBFBD>厰<EFBFBD> (Delete):

    • <EFBFBD>詨<EFBFBD><EFBFBD>寞<EFBFBD>: hover:text-rose-500 hover:bg-rose-500/10 hover:border-rose-500/20
    • SVG 頝臬<E9A09D>:
    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>

Important

<EFBFBD>讠䔄<EFBFBD>啣<EFBFBD><EFBFBD>賢<EFBFBD>嚗<EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ⅱ隤<EFBFBD> app.css 銝剔<E98A9D> .btn-luxury-* 蝟餃<E89D9F>蝯<EFBFBD>辣<EFBFBD>臬炏皛輯雲<E8BCAF><E99BB2>瘙<EFBFBD><E79899><EFBFBD> <0A>渡<EFBFBD><E6B8A1><EFBFBD> Blade 銝剖神<E58996>亙之<E4BA99>誯<EFBFBD>銴<EFBFBD><E98AB4> bg-indigo-600 蝑㕑<E89D91>撘誯<E69298><E8AAAF>乓<EFBFBD><E4B993>

Tip

<EFBFBD>園<EFBFBD><EFBFBD>唳𧊋摰𡁶儔<EFBFBD><EFBFBD> UI <20><>憛𦠜<E6869B>嚗<EFBFBD><E59A97><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> admin.dashboard.blade.php <20><>㨃<EFBFBD><E3A883><EFBFBD><EFBFBD>單<EFBFBD><E596AE>閙<EFBFBD>撖虫<E69296><E899AB>孵<EFBFBD><E5ADB5>脰<EFBFBD>銵滨<E98AB5><E6BBA8><EFBFBD>

Reference in New Issue View Git Blame Copy Permalink