自动生成辅助色

src/api/app.js

@@ -169,3 +169,10 @@ export function GetVerificationCodeImage() {
 export function ResetPassword(data) {
   return http.post(`${process.env.VUE_APP_EepServer}?MethodName=user_manager-ResetPassword`, data);
 }
+
+/**
+ * @description 根据主色生成辅助色
+ */
+export function ToAuxiliaryColor(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=tool-ToAuxiliaryColor`, data);
+}

src/views/personal_workbench/project/components/BookUnifiedAttr.vue

@@ -15,6 +15,7 @@
               <el-color-picker v-model="unified_attrib.topic_color" />
               <span>辅助色</span>
               <el-color-picker v-model="unified_attrib.assist_color" />
+              <span class="link" @click="generateAssistColor">自动生成辅助色</span>
             </div>
           </el-form-item>
           <el-form-item label="字体">
@@ -79,6 +80,7 @@
 <script>
 import { pinyinPositionList, isEnable } from '@/views/book/courseware/data/common';
 import { GetBookUnifiedAttrib, ApplyBookUnifiedAttrib, SaveBookUnifiedAttrib } from '@/api/book';
+import { ToAuxiliaryColor } from '@/api/app';
 import { unified_attrib } from '@/common/data';
 
 export default {
@@ -159,6 +161,19 @@ export default {
       this.$emit('update:visible', false);
       this.$emit('close');
     },
+    /* eslint-disable no-bitwise */
+    /**
+     * 根据主题色自动生成辅助色
+     */
+    generateAssistColor() {
+      const bigint = parseInt(this.unified_attrib.topic_color.replace('#', ''), 16);
+      const r = (bigint >> 16) & 255;
+      const g = (bigint >> 8) & 255;
+      const b = bigint & 255;
+      ToAuxiliaryColor({ r, g, b }).then(({ color: { r, g, b } }) => {
+        this.unified_attrib.assist_color = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+      });
+    },
   },
 };
 </script>