response()->success(Admin::menu()->all()); } return $this->response()->success(); } public function index(): JsonResponse|JsonResource { $page = $this->basePage()->css($this->css())->body([ // Grid::make()->columns([ // $this->frameworkInfo()->md(5), // Flex::make()->items([ // $this->pieChart(), // $this->cube(), // ]), // ]), Grid::make()->columns([ $this->frameworkInfo()->md(6), // $this->lineChart()->md(8), Flex::make()->className('h-full')->items([ $this->clock(), $this->hitokoto(), ])->direction('column')->md(6), ]), ]); return $this->response()->success($page); } protected function upload($type = 'file') { $file = request()->file('file'); if (! $file) { return $this->response()->fail(__('admin.upload_file_error')); } $disk = request()->input('disk', Admin::config('admin.upload.disk')); $path = $file->store(Admin::config('admin.upload.directory.'.$type), $disk); return $this->response()->success(['value' => request('full-url') ? Storage::disk($disk)->url($path) : $path]); } /** * 一言 */ public function hitokoto() { return Card::make() ->className('h-full clear-card-mb') ->body( Custom::make()->html(<<<'HTML'
—— 
HTML )->onMount(<<<'JS' fetch('https://v1.hitokoto.cn?c=i') .then(response => response.json()) .then(data => { const hitokoto = document.querySelector('#hitokoto_text') hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}` hitokoto.innerText = data.hitokoto document.querySelector('#hitokoto_from_who').innerText = data.from_who document.querySelector('#hitokoto_from').innerText = data.from }) .catch(console.error) JS ) ); } public function clock(): Card { return Card::make()->className('h-full bg-blingbling')->header([ 'title' => '时钟', ])->body([ Custom::make() ->name('clock') ->html('
') ->onMount(<<<'JS' const clock = document.getElementById('clock'); const tick = () => { clock.innerHTML = (new Date()).toLocaleTimeString(); requestAnimationFrame(tick); }; tick(); const clockDate = document.getElementById('clock-date'); clockDate.innerHTML = (new Date()).toLocaleDateString(); JS ), ]); } public function frameworkInfo(): Card { return Card::make()->className('h-full')->body( Wrapper::make()->className('h-full')->body([ Flex::make()->className('h-full')->direction('column')->justify('center')->alignItems('center')->items([ Image::make()->src(url(config('admin.logo'))), Wrapper::make()->className('text-3xl mt-9')->body(config('admin.name')), // Flex::make()->className('w-64 mt-5')->justify('space-around')->items([ // Action::make() // ->level('link') // ->label('GitHub') // ->blank(true) // ->actionType('url') // ->blank(true) // ->link('https://github.com/slowlyo/owl-admin'), // Action::make() // ->level('link') // ->label('OwlAdmin 文档') // ->blank(true) // ->actionType('url') // ->link('http://admin-demo.slowlyo.top/doc'), // Action::make() // ->level('link') // ->label('Amis 文档') // ->blank(true) // ->actionType('url') // ->link('https://aisuda.bce.baidu.com/amis/zh-CN/docs/index'), // ]), ]), ]) ); } public function pieChart(): Card { return Card::make()->className('h-96')->body( Chart::make()->height(350)->config("{ tooltip: { trigger: 'item' }, legend: { bottom: 0, left: 'center' }, series: [ { name: 'Access From', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ] } ] }") ); } public function lineChart(): Card { $randArr = function () { $_arr = []; for ($i = 0; $i < 7; $i++) { $_arr[] = random_int(10, 200); } return '['.implode(',', $_arr).']'; }; $random1 = $randArr(); $random2 = $randArr(); $chart = Chart::make()->height(380)->className('h-96')->config("{ title:{ text: '会员增长情况', }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, grid:{ left: '7%', right:'3%', top: 60, bottom: 30, }, legend: { data: ['访问量','注册量'] }, series: [ { name: '访问量', data: {$random1}, type: 'line', areaStyle: {}, smooth: true, symbol: 'none', }, { name:'注册量', data: {$random2}, type: 'line', areaStyle: {}, smooth: true, symbol: 'none', }, ]}"); return Card::make()->className('clear-card-mb')->body($chart); } public function cube(): Card { return Card::make()->className('h-96 ml-4 w-8/12')->body( Html::make()->html(<<<'HTML'
HTML ) ); } private function css(): array { return [ '.clear-card-mb' => [ 'margin-bottom' => '0 !important', ], '.cxd-Image' => [ 'border' => '0', ], '.bg-blingbling' => [ 'color' => '#fff', 'background' => 'linear-gradient(to bottom right, #2C3E50, #FD746C, #FF8235, #ffff1c, #92FE9D, #00C9FF, #a044ff, #e73827)', 'background-repeat' => 'no-repeat', 'background-size' => '1000% 1000%', 'animation' => 'gradient 60s ease infinite', ], '@keyframes gradient' => [ '0%{background-position:0% 0%} 50%{background-position:100% 100%} 100%{background-position:0% 0%}', ], '.bg-blingbling .cxd-Card-title' => [ 'color' => '#fff', ], ]; } }