Merge pull request #2 from DeepFundAI/codex/add-automatic-light-color-calculation

feat(theme): toggle primary light color auto calc

Author: lsustc

eslint.config.ts

@@ -24,5 +24,10 @@ export default defineConfigWithVueTs(
     ...pluginVitest.configs.recommended,
     files: ['src/**/__tests__/*'],
   },
+  {
+    rules: {
+      'vue/multi-word-component-names': 'off',
+    },
+  },
   skipFormatting,
 )

src/views/ThemeEditor.vue

@@ -16,6 +16,12 @@
         :inactive-icon="Sunny"
         style="margin-right: 10px"
       />
+      <el-switch
+        v-model="autoPrimaryLight"
+        active-text="自动色值"
+        inactive-text="手动"
+        style="margin-right: 10px"
+      />
       <el-button @click="saveObjectAsCss('cssVar.css')">导出</el-button>
       <!-- <el-button>编辑</el-button> -->
       <el-button type="primary">保存</el-button>
@@ -348,6 +354,7 @@ import Github from '@/components/icons/Github.vue'
 const activeName = ref('first')
 const activeNames = ref(['1'])
 const modifyCssVar: Ref<Record<string, string>> = ref({})
+const autoPrimaryLight = ref(true)
 
 const isDark = useDark({
   selector: 'html',
@@ -358,10 +365,38 @@ const isDark = useDark({
   storage: localStorage,
 })
 
+const mixColor = (color1: string, color2: string, weight: number) => {
+  const w = Math.max(Math.min(weight, 1), 0)
+  const toHex = (color: string) => color.replace('#', '')
+  const c1 = toHex(color1)
+  const c2 = toHex(color2)
+  const r = Math.round(parseInt(c1.slice(0, 2), 16) * w + parseInt(c2.slice(0, 2), 16) * (1 - w))
+  const g = Math.round(parseInt(c1.slice(2, 4), 16) * w + parseInt(c2.slice(2, 4), 16) * (1 - w))
+  const b = Math.round(parseInt(c1.slice(4, 6), 16) * w + parseInt(c2.slice(4, 6), 16) * (1 - w))
+  return `#${r.toString(16).padStart(2, '0')}${g
+    .toString(16)
+    .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
+}
+
 const updateCssVar = (props: CssVarInfo) => {
   const value = props.value + props.unit
   setCssVarValue(props.cssVar, value)
   modifyCssVar.value[props.cssVar] = value
+
+  if (props.cssVar === '--el-color-primary' && autoPrimaryLight.value) {
+    const primaryGroup = color.find((c) => c.type === 'primary')?.data ?? []
+    const computeLight = (light: number) => {
+      const cssVar = `--el-color-primary-light-${light}`
+      const target = primaryGroup.find((d) => d.cssVar === cssVar)
+      if (target) {
+        const mix = mixColor('#ffffff', props.value, light / 10)
+        target.value = mix
+        setCssVarValue(cssVar, mix)
+        modifyCssVar.value[cssVar] = mix
+      }
+    }
+    ;[3, 5, 7, 8, 9].forEach(computeLight)
+  }
 }
 
 const setCssVarValue = (name: string, value: string) => {

src/views/components/data/Tree.vue

@@ -24,30 +24,28 @@
 </template>
 <script lang="ts" setup>
 import type Node from 'element-plus/es/components/tree/src/model/node'
-import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
 import type { AllowDropType, NodeDropType } from 'element-plus/es/components/tree/src/tree.type'
 
-const handleDragStart = (node: Node, ev: DragEvents) => {
+const handleDragStart = (node: Node) => {
   console.log('drag start', node)
 }
-const handleDragEnter = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
+const handleDragEnter = (draggingNode: Node, dropNode: Node) => {
   console.log('tree drag enter:', dropNode.label)
 }
-const handleDragLeave = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
+const handleDragLeave = (draggingNode: Node, dropNode: Node) => {
   console.log('tree drag leave:', dropNode.label)
 }
-const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
+const handleDragOver = (draggingNode: Node, dropNode: Node) => {
   console.log('tree drag over:', dropNode.label)
 }
 const handleDragEnd = (
   draggingNode: Node,
   dropNode: Node,
-  dropType: NodeDropType,
-  ev: DragEvents
+  dropType: NodeDropType
 ) => {
   console.log('tree drag end:', dropNode && dropNode.label, dropType)
 }
-const handleDrop = (draggingNode: Node, dropNode: Node, dropType: NodeDropType, ev: DragEvents) => {
+const handleDrop = (draggingNode: Node, dropNode: Node, dropType: NodeDropType) => {
   console.log('tree drop:', dropNode.label, dropType)
 }
 const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {

src/views/components/form/Upload.vue

@@ -90,7 +90,7 @@ const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
   )
 }
 
-const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
+const beforeRemove: UploadProps['beforeRemove'] = (uploadFile) => {
   return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(
     () => true,
     () => false

tailwind.config.js

@@ -290,8 +290,8 @@ export default {
           'justify-content': 'space-between',
           'align-items': 'center',
         },
-      }),
-        addVariant('black', '.dark &')
+      })
+      addVariant('black', '.dark &')
     }),
   ],
 }