Optimize panel of changing color

app/Http/Controllers/AdminController.php

@@ -70,17 +70,6 @@ class AdminController extends Controller
 
     public function customize(Request $request)
     {
-        if ($request->input('action') == 'color') {
-            $this->validate($request, [
-                'color_scheme' => 'required',
-            ]);
-
-            $color_scheme = str_replace('_', '-', $request->input('color_scheme'));
-            option(['color_scheme' => $color_scheme]);
-
-            return json(trans('admin.customize.change-color.success'), 0);
-        }
-
         $homepage = Option::form('homepage', OptionForm::AUTO_DETECT, function ($form) {
             $form->text('home_pic_url')->hint();
 
@@ -107,10 +96,12 @@ class AdminController extends Controller
             $form->textarea('custom_js', 'JavaScript')->rows(6);
         })->addMessage()->handle();
 
-        return view('admin.customize', [
-            'forms' => compact('homepage', 'customJsCss'),
-            'extra' => ['currentSkin' => option('color_scheme')],
-        ]);
+        if ($request->isMethod('post') && $request->input('action') == 'color') {
+            $color = $this->validate($request, ['color' => 'required'])['color'];
+            option(['color_scheme' => $color]);
+        }
+
+        return view('admin.customize', ['forms' => compact('homepage', 'customJsCss')]);
     }
 
     public function score()

resources/assets/src/scripts/route.ts

@@ -62,8 +62,9 @@ export default [
   },
   {
     path: 'admin/customize',
-    component: () => import('../views/admin/Customization.vue'),
-    el: '#change-color',
+    module: [
+      () => import('../views/admin/Customization'),
+    ],
   },
   {
     path: 'admin/plugins/manage',

resources/assets/src/views/admin/Customization.ts

@@ -0,0 +1,16 @@
+function handler(event: Event): void {
+  document.body.className =
+    document.body.className.replace(
+      /skin-\w+(?:-light)?/,
+      // eslint-disable-next-line no-extra-parens
+      (event.target as HTMLInputElement).value
+    )
+}
+
+const table = document.querySelector('#change-color')
+/* istanbul ignore next */
+if (table) {
+  table.addEventListener('change', handler)
+}
+
+export default handler

resources/assets/src/views/admin/Customization.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="box box-primary">
-    <div class="box-header with-border">
-      <h3 v-t="'admin.change-color.title'" class="box-title" />
-    </div>
-    <div class="box-body no-padding">
-      <table class="table table-striped bring-up nth-2-center">
-        <tbody>
-          <template v-for="color in colors">
-            <tr
-              v-for="innerColor in [color, `${color}-light`]"
-              :key="innerColor"
-            >
-              <td v-t="`admin.colors.${innerColor}`" />
-              <td>
-                <a
-                  href="#"
-                  :class="`btn bg-${color} btn-xs`"
-                  @click="preview(innerColor)"
-                >
-                  <i class="far fa-eye" />
-                </a>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
-    <div class="box-footer">
-      <el-button type="primary" @click="submit">
-        {{ $t('general.submit') }}
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Customization',
-  data() {
-    return {
-      colors: ['blue', 'yellow', 'green', 'purple', 'red', 'black'],
-      currentSkin: blessing.extra.currentSkin,
-    }
-  },
-  methods: {
-    preview(color) {
-      document.body.classList.replace(this.currentSkin, `skin-${color}`)
-      this.currentSkin = `skin-${color}`
-    },
-    async submit() {
-      const { message } = await this.$http.post('/admin/customize?action=color', {
-        color_scheme: this.currentSkin,
-      })
-      this.$message.success(message)
-    },
-  },
-}
-</script>

resources/assets/tests/views/admin/Customization.test.ts

@@ -1,26 +1,10 @@
-import Vue from 'vue'
-import { mount } from '@vue/test-utils'
-import Customization from '@/views/admin/Customization.vue'
-
-window.blessing.extra = { currentSkin: 'skin-blue' }
+import handler from '@/views/admin/Customization'
 
 test('preview color', () => {
   document.body.classList.add('skin-blue')
-  const wrapper = mount(Customization)
-  wrapper.findAll('a').at(2)
-    .trigger('click')
-  expect(document.body.classList.contains('skin-blue')).toBeFalse()
-  expect(document.body.classList.contains('skin-yellow')).toBeTrue()
-})
+  const target = document.createElement('input')
+  target.value = 'skin-purple'
+  handler({ target } as any as Event)
 
-test('submit color', () => {
-  Vue.prototype.$http.post.mockResolvedValue({ code: 0, message: '' })
-  const wrapper = mount(Customization)
-  wrapper.findAll('a').at(4)
-    .trigger('click')
-  wrapper.find('button').trigger('click')
-  expect(Vue.prototype.$http.post).toBeCalledWith(
-    '/admin/customize?action=color',
-    { color_scheme: 'skin-green' }
-  )
+  expect(document.body.classList.contains('skin-purple')).toBeTrue()
 })

resources/misc/changelogs/en/4.3.0.md

@@ -6,3 +6,4 @@
 ## Tweaked
 
 - Tweaked style of chart at administration panel.
+- Optimized panel of changing theme color.

resources/misc/changelogs/zh_CN/4.3.0.md

@@ -6,3 +6,4 @@
 ## 调整
 
 - 调整管理面板中的图表样式
+- 优化「更改配色」的面板

resources/views/admin/customize.blade.php

@@ -22,7 +22,50 @@
 
         <div class="row">
             <div class="col-md-3">
-                <div id="change-color"></div><!-- /.box -->
+                <form class="box box-primary" method="post" action="{{ url('/admin/customize?action=color') }}">
+                    @csrf
+                    <div class="box-header with-border">
+                        <h3 v-t="'admin.change-color.title'" class="box-title">
+                            @lang('admin.customize.change-color.title')
+                        </h3>
+                    </div>
+                    <div class="box-body no-padding">
+                        <table class="table table-striped bring-up nth-2-center" id="change-color">
+                            @php
+                                $colors = ['blue', 'yellow', 'green', 'purple', 'red', 'black'];
+                            @endphp
+                            <tbody>
+                                @foreach ($colors as $color)
+                                <tr>
+                                    <td>@lang('admin.customize.colors.'.$color)</td>
+                                    <td>
+                                        <label>
+                                            <input type="radio" name="color" value="skin-{{ $color }}" style="display: none;">
+                                            <span class="btn bg-{{ $color }} btn-xs">
+                                                <i class="far fa-eye"></i>
+                                            </span>
+                                        </label>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>@lang('admin.customize.colors.'.$color.'-light')</td>
+                                    <td>
+                                        <label>
+                                            <input type="radio" name="color" value="skin-{{ $color }}-light" style="display: none;">
+                                            <span class="btn bg-{{ $color }} btn-xs">
+                                                <i class="far fa-eye"></i>
+                                            </span>
+                                        </label>
+                                    </td>
+                                </tr>
+                                @endforeach
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="box-footer">
+                        <input type="submit" class="el-button el-button--primary" value="@lang('general.submit')" name="submit_color">
+                    </div>
+                </form>
             </div>
 
             <div class="col-md-9">
@@ -35,9 +78,4 @@
 
     </section><!-- /.content -->
 </div><!-- /.content-wrapper -->
-
-<script>
-blessing.extra = @json($extra);
-</script>
-
 @endsection

tests/AdminControllerTest.php

@@ -36,16 +36,10 @@ class AdminControllerTest extends BrowserKitTestCase
 
     public function testCustomize()
     {
-        // Check if `color_scheme` is existed or not
-        $this->getJson('/admin/customize?action=color')
-            ->seeJsonStructure(['errors' => ['color_scheme']]);
-
         // Change color
-        $this->get('/admin/customize?action=color&color_scheme=skin-purple')
-            ->seeJson([
-                'code' => 0,
-                'message' => trans('admin.customize.change-color.success'),
-            ]);
+        $this->visit('/admin/customize')
+            ->select('skin-purple', 'color')
+            ->press('submit_color');
         $this->assertEquals('skin-purple', option('color_scheme'));
 
         $this->visit('/admin/customize')