mama/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[STYLE] 系統用語標準化與客戶管理 UI 點選透明度優化 (所屬單位 -> 公司名稱、姓名 -> 名稱)
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 59s
Details

Browse Source
This commit is contained in:
sky121113
2026-03-30 10:16:05 +08:00
parent e780e195e2
commit ea0333d77e
9 changed files with 107 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/css/app.css
View File

@@ -289,7 +289,6 @@
.hs-select-menu {
@apply mt-2 max-h-72 p-2 space-y-0.5 z-50 bg-white border border-slate-200 rounded-2xl shadow-2xl overflow-y-auto;
@apply dark:bg-slate-900 dark:border-slate-800;
backdrop-filter: blur(12px);
}
.hs-select-option {

123
resources/views/admin/companies/index.blade.php
View File

@@ -196,34 +196,28 @@
</div>
</td>
<td class="px-6 py-6 text-center">
<div class="flex flex-col items-center gap-1">
<div class="flex items-center gap-1.5">
<div class="flex items-center gap-1.5">
<span class="text-[11px] font-black text-slate-400 uppercase tracking-tighter">{{ __('Original') }}</span>
<span class="px-2.5 py-1 rounded-md text-[11px] font-black {{ $company->original_type === 'buyout' ? 'bg-amber-500/10 text-amber-600' : 'bg-blue-500/10 text-blue-600' }} uppercase tracking-widest">
<div class="flex flex-col items-center gap-2">
<div class="flex items-center gap-2 min-w-[100px] justify-center">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest w-8 text-right">{{ __('Original:') }}</span>
<span class="px-2 py-0.5 rounded text-xs font-bold {{ $company->original_type === 'buyout' ? 'bg-amber-500/10 text-amber-600' : 'bg-blue-500/10 text-blue-600' }} uppercase tracking-wider">
{{ __($company->original_type === 'buyout' ? 'Buyout' : 'Lease') }}
</span>
</div>
<div class="text-slate-300 dark:text-slate-700">
<svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div class="flex items-center gap-1.5">
<span class="text-[11px] font-black text-slate-400 uppercase tracking-tighter">{{ __('Current') }}</span>
<span class="px-2.5 py-1 rounded-md text-[11px] font-black {{ $company->current_type === 'buyout' ? 'bg-amber-500/10 text-amber-600 font-bold border border-amber-500/20' : 'bg-blue-500/10 text-blue-600 font-bold border border-blue-500/20' }} uppercase tracking-widest">
<div class="flex items-center gap-2 min-w-[100px] justify-center">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest w-8 text-right">{{ __('Current:') }}</span>
<span class="px-2 py-0.5 rounded text-xs font-bold {{ $company->current_type === 'buyout' ? 'bg-amber-500/10 text-amber-600 border border-amber-500/20' : 'bg-blue-500/10 text-blue-600 border border-blue-500/20' }} uppercase tracking-wider">
{{ __($company->current_type === 'buyout' ? 'Buyout' : 'Lease') }}
</span>
</div>
</div>
</td>
<td class="px-6 py-6 text-center">
<td class="px-6 py-6 text-center py-6">
@if($company->status)
<span
class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase">
<span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase">
{{ __('Active') }}
</span>
@else
<span
class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-rose-500/10 text-rose-500 border border-rose-500/20 tracking-widest uppercase">
<span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-rose-500/10 text-rose-500 border border-rose-500/20 tracking-widest uppercase">
{{ __('Disabled') }}
</span>
@endif
@@ -241,15 +235,20 @@
</div>
</div>
</td>
<td class="px-6 py-6 text-center">
<div class="flex flex-col items-center gap-0.5">
<span class="text-[12px] font-bold font-mono text-slate-500 dark:text-slate-400 uppercase tracking-tighter">
{{ $company->start_date ? $company->start_date->format('Y-m-d') : '--' }}
</span>
<div class="h-2 w-px bg-slate-200 dark:bg-slate-700"></div>
<span class="text-[13px] font-black font-display tracking-widest {{ $company->end_date && $company->end_date->isPast() ? 'text-rose-500' : 'text-slate-800 dark:text-slate-200' }}">
{{ $company->end_date ? $company->end_date->format('Y-m-d') : __('Permanent') }}
</span>
<td class="px-6 py-6 text-center text-slate-500 dark:text-slate-400">
<div class="flex flex-col items-center gap-1.5 font-mono">
<div class="flex items-center gap-2 min-w-[130px] justify-center">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">{{ __('From:') }}</span>
<span class="text-[13px] font-bold tracking-tighter text-slate-600 dark:text-slate-300">
{{ $company->start_date ? $company->start_date->format('Y-m-d') : '--' }}
</span>
</div>
<div class="flex items-center gap-2 min-w-[130px] justify-center">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">{{ __('To:') }}</span>
<span class="text-[13px] font-bold tracking-tighter {{ $company->end_date && $company->end_date->isPast() ? 'text-rose-500' : 'text-slate-800 dark:text-slate-200' }}">
{{ $company->end_date ? $company->end_date->format('Y-m-d') : __('Permanent') }}
</span>
</div>
</div>
</td>
<td class="px-6 py-6 text-right">
@@ -381,18 +380,21 @@
<!-- Business Type Selector -->
<div class="p-4 rounded-2xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 space-y-4">
<label class="text-[12px] font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Business Type') }}</label>
<label class="text-[11px] font-black text-slate-500 uppercase tracking-widest pl-1">
{{ __('Business Type') }}
<span class="text-rose-500 ml-0.5">*</span>
</label>
<!-- 新增模式：顯示切換按鈕 -->
<div x-show="!editing" class="flex p-1.5 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 w-fit">
<button type="button" @click="currentCompany.original_type = 'lease'"
:class="currentCompany.original_type === 'lease' ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/20' : 'text-slate-400 hover:text-slate-600'"
class="px-6 py-2 rounded-lg text-sm font-black uppercase tracking-widest transition-all">
class="px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-widest transition-all">
{{ __('Lease') }}
</button>
<button type="button" @click="currentCompany.original_type = 'buyout'"
:class="currentCompany.original_type === 'buyout' ? 'bg-amber-500 text-white shadow-lg shadow-amber-500/20' : 'text-slate-400 hover:text-slate-600'"
class="px-6 py-2 rounded-lg text-sm font-black uppercase tracking-widest transition-all">
class="px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-widest transition-all">
{{ __('Buyout') }}
</button>
<input type="hidden" name="original_type" :value="currentCompany.original_type">
@@ -401,20 +403,20 @@
<!-- 編輯模式：顯示原始類型固定值 + 當前類型切換 -->
<div x-show="editing" class="flex flex-col gap-5">
<div class="flex items-center gap-4">
<span class="text-sm font-bold text-slate-400">{{ __('Original Type') }}:</span>
<span class="px-4 py-1.5 bg-slate-100 dark:bg-slate-800 rounded-lg text-sm font-black uppercase tracking-widest text-slate-600 dark:text-slate-400" x-text="currentCompany.original_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span>
<span class="text-[11px] font-black text-slate-400 uppercase tracking-widest">{{ __('Original Type') }}: <span class="text-rose-500 ml-0.5">*</span></span>
<span class="px-4 py-1.5 bg-slate-100 dark:bg-slate-800 rounded-lg text-xs font-bold uppercase tracking-widest text-slate-600 dark:text-slate-400" x-text="currentCompany.original_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span>
</div>
<div class="flex items-center gap-4">
<span class="text-sm font-bold text-slate-400">{{ __('Current Type') }}:</span>
<span class="text-[11px] font-black text-slate-400 uppercase tracking-widest">{{ __('Current Type') }}: <span class="text-rose-500 ml-0.5">*</span></span>
<div class="flex p-1.5 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 w-fit">
<button type="button" @click="currentCompany.current_type = 'lease'"
:class="currentCompany.current_type === 'lease' ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/20' : 'text-slate-400 hover:text-slate-600'"
class="px-6 py-2 rounded-lg text-sm font-black uppercase tracking-widest transition-all">
class="px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-widest transition-all">
{{ __('Lease') }}
</button>
<button type="button" @click="currentCompany.current_type = 'buyout'"
:class="currentCompany.current_type === 'buyout' ? 'bg-amber-500 text-white shadow-lg shadow-amber-500/20' : 'text-slate-400 hover:text-slate-600'"
class="px-6 py-2 rounded-lg text-sm font-black uppercase tracking-widest transition-all">
class="px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-widest transition-all">
{{ __('Buyout') }}
</button>
<input type="hidden" name="current_type" :value="currentCompany.current_type">
@@ -426,13 +428,13 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{
__('Company Name') }}</label>
__('Company Name') }} <span class="text-rose-500 ml-0.5">*</span></label>
<input type="text" name="name" x-model="currentCompany.name" required
class="luxury-input w-full" placeholder="{{ __('e.g. Taiwan Star') }}">
</div>
<div class="space-y-2">
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{
__('Company Code') }}</label>
__('Company Code') }} <span class="text-rose-500 ml-0.5">*</span></label>
<input type="text" name="code" x-model="currentCompany.code" required
class="luxury-input w-full" placeholder="{{ __('e.g. TWSTAR') }}">
</div>
@@ -448,8 +450,8 @@
<div class="grid grid-cols-2 gap-3">
<div class="space-y-2">
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{
__('Start Date') }}</label>
<input type="date" name="start_date" x-model="currentCompany.start_date"
__('Start Date') }} <span class="text-rose-500 ml-0.5">*</span></label>
<input type="date" name="start_date" x-model="currentCompany.start_date" required
class="luxury-input w-full px-2">
</div>
<div class="space-y-2">
@@ -508,7 +510,7 @@
</div>
<!-- Contact Section -->
<div class="space-y-6 pt-6 border-t border-slate-100 dark:border-slate-800 relative z-10">
<div class="space-y-6 pt-6 border-t border-slate-100 dark:border-slate-800 relative z-20">
<div class="flex items-center gap-3">
<div class="h-6 w-1 bg-amber-500 rounded-full"></div>
<h4 class="text-xs font-black text-slate-800 dark:text-white uppercase tracking-widest">{{
@@ -535,17 +537,10 @@
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{
__('Status') }}</label>
<x-searchable-select
id="company-status"
name="status"
x-model="currentCompany.status"
:hasSearch="false"
x-init="$watch('currentCompany.status', (value) => {
$nextTick(() => {
const inst = HSSelect.getInstance($el);
if (inst) {
inst.setValue(String(value));
}
});
})"
>
<option value="1">{{ __('Active') }}</option>
<option value="0">{{ __('Disabled') }}</option>
@@ -561,7 +556,7 @@
</div>
<!-- Feature Toggles Section -->
<div class="space-y-6 pt-6 border-t border-slate-100 dark:border-slate-800 relative z-10">
<div class="space-y-6 pt-6 border-t border-slate-100 dark:border-slate-800 relative z-[5]">
<div class="flex items-center gap-3">
<div class="h-6 w-1 bg-cyan-500 rounded-full"></div>
<h4 class="text-xs font-black text-slate-800 dark:text-white uppercase tracking-widest">{{ __('Feature Settings') }}</h4>
@@ -684,19 +679,18 @@
<!-- Business Type -->
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-4">{{ __('Business Type') }}</span>
<div class="flex items-center gap-4">
<div class="flex-1">
<p class="text-[11px] font-black text-slate-400 uppercase tracking-widest mb-1.5">{{ __('Original') }}</p>
<span class="px-2.5 py-1 rounded-lg text-xs font-black uppercase tracking-widest"
<h4 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.2em] mb-4">{{ __('Business Type') }}</h4>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-[11px] font-bold text-slate-400">{{ __('Original:') }}</span>
<span class="px-2.5 py-1 rounded-lg text-[11px] font-bold uppercase tracking-widest"
:class="detailCompany.original_type === 'buyout' ? 'bg-amber-500/10 text-amber-600' : 'bg-blue-500/10 text-blue-600'"
x-text="detailCompany.original_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span>
</div>
<div class="w-px h-10 bg-slate-200 dark:bg-slate-700"></div>
<div class="flex-1 text-right">
<p class="text-[11px] font-black text-slate-400 uppercase tracking-widest mb-1.5">{{ __('Current') }}</p>
<span class="px-2.5 py-1 rounded-lg text-xs font-black uppercase tracking-widest"
:class="detailCompany.current_type === 'buyout' ? 'bg-amber-500/10 text-amber-600' : 'bg-blue-500/10 text-blue-600'"
<div class="flex items-center justify-between">
<span class="text-[11px] font-bold text-slate-400">{{ __('Current:') }}</span>
<span class="px-2.5 py-1 rounded-lg text-[11px] font-bold uppercase tracking-widest"
:class="detailCompany.current_type === 'buyout' ? 'bg-amber-500/10 text-amber-600 border border-amber-500/20' : 'bg-blue-500/10 text-blue-600 border border-blue-500/20'"
x-text="detailCompany.current_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span>
</div>
</div>
@@ -704,11 +698,16 @@
<!-- Contract Period -->
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-2">{{ __('Contract Period') }}</span>
<div class="flex items-center gap-3">
<div class="text-base font-black font-mono text-slate-700 dark:text-slate-200" x-text="detailCompany.start_date || '--'"></div>
<span class="text-slate-300 text-xs">→</span>
<div class="text-base font-black font-mono text-slate-700 dark:text-slate-200" x-text="detailCompany.end_date || '{{ __('Permanent') }}'"></div>
<h4 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.2em] mb-4">{{ __('Contract Period') }}</h4>
<div class="space-y-3 font-mono">
<div class="flex items-center gap-3">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter min-w-[32px]">{{ __('From:') }}</span>
<div class="text-[13px] font-bold tracking-tighter text-slate-700 dark:text-slate-200" x-text="detailCompany.start_date || '--'"></div>
</div>
<div class="flex items-center gap-3">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter min-w-[32px]">{{ __('To:') }}</span>
<div class="text-[13px] font-bold tracking-tighter text-slate-800 dark:text-white" :class="detailCompany.end_date_expired ? 'text-rose-500' : ''" x-text="detailCompany.end_date || '{{ __('Permanent') }}'"></div>
</div>
</div>
</div>
</div>

2
resources/views/components/searchable-select.blade.php
View File

@@ -21,7 +21,7 @@
"searchClasses" => "block w-[calc(100%-16px)] mx-2 py-2 px-3 text-sm border-slate-200 dark:border-white/10 rounded-lg focus:border-cyan-500 focus:ring-cyan-500 bg-slate-50 dark:bg-slate-900/50 dark:text-slate-200 placeholder:text-slate-400 dark:placeholder:text-slate-500",
"searchWrapperClasses" => "sticky top-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md p-2 z-10",
"toggleClasses" => "hs-select-toggle luxury-select-toggle",
"dropdownClasses" => "hs-select-menu w-full bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl border border-slate-200 dark:border-white/10 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] mt-2 z-[100] animate-luxury-in",
"dropdownClasses" => "hs-select-menu w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] mt-2 z-[100] animate-luxury-in",
"optionClasses" => "hs-select-option py-2.5 px-3 mb-0.5 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-cyan-500/10 dark:hover:text-cyan-400 rounded-lg flex items-center justify-between transition-all duration-300",
"optionTemplate" => '<div class="flex items-center justify-between w-full"><span data-title></span><span class="hs-select-active-indicator hidden text-cyan-500"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div>'
];