✨ feat(naive): 测试主题化成功

packages/vite-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-create-app",
-  "version": "0.17.8",
+  "version": "0.17.9",
   "description": "",
   "main": "index.js",
   "bin": {

packages/vite-cli/template/vue/package.ejs

@@ -24,6 +24,7 @@
     "@erkelost/layout": "2.9.3",
     "@erkelost/utils": "^1.0.2",
     "css-color-function": "^1.3.3",
+    "colord": "^2.9.2",
     <% } -%>
     <% if (useRouter) { -%>
     <%-  Router %>

packages/vite-cli/template/vue/src/utils/common/color.ts

@@ -0,0 +1,150 @@
+import { colord, extend } from 'colord'
+import mixPlugin from 'colord/plugins/mix'
+import type { HsvColor } from 'colord'
+
+extend([mixPlugin])
+
+type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
+
+const hueStep = 2
+const saturationStep = 16
+const saturationStep2 = 5
+const brightnessStep1 = 5
+const brightnessStep2 = 15
+const lightColorCount = 5
+const darkColorCount = 4
+
+/**
+ * 根据颜色获取调色板颜色(从左至右颜色从浅到深，6为主色号)
+ * @param color - 颜色
+ * @param index - 调色板的对应的色号(6为主色号)
+ * @description 算法实现从ant-design调色板算法中借鉴 https://github.com/ant-design/ant-design/blob/master/components/style/color/colorPalette.less
+ */
+export function getColorPalette(color: string, index: ColorIndex) {
+  if (index === 6) return color
+
+  const isLight = index < 6
+  const hsv = colord(color).toHsv()
+  const i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1
+
+  const newHsv: HsvColor = {
+    h: getHue(hsv, i, isLight),
+    s: getSaturation(hsv, i, isLight),
+    v: getValue(hsv, i, isLight)
+  }
+
+  return colord(newHsv).toHex()
+}
+
+/**
+ * 根据颜色获取调色板颜色所有颜色
+ * @param color - 颜色
+ */
+export function getAllColorPalette(color: string) {
+  const indexs: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+  return indexs.map((index) => getColorPalette(color, index))
+}
+
+/**
+ * 获取色相渐变
+ * @param hsv - hsv格式颜色值
+ * @param i - 与6的相对距离
+ * @param isLight - 是否是亮颜色
+ */
+function getHue(hsv: HsvColor, i: number, isLight: boolean) {
+  let hue: number
+  if (hsv.h >= 60 && hsv.h <= 240) {
+    // 冷色调
+    // 减淡变亮 色相顺时针旋转 更暖
+    // 加深变暗 色相逆时针旋转 更冷
+    hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i
+  } else {
+    // 暖色调
+    // 减淡变亮 色相逆时针旋转 更暖
+    // 加深变暗 色相顺时针旋转 更冷
+    hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i
+  }
+  if (hue < 0) {
+    hue += 360
+  } else if (hue >= 360) {
+    hue -= 360
+  }
+  return hue
+}
+
+/**
+ * 获取饱和度渐变
+ * @param hsv - hsv格式颜色值
+ * @param i - 与6的相对距离
+ * @param isLight - 是否是亮颜色
+ */
+function getSaturation(hsv: HsvColor, i: number, isLight: boolean) {
+  let saturation: number
+  if (isLight) {
+    saturation = hsv.s - saturationStep * i
+  } else if (i === darkColorCount) {
+    saturation = hsv.s + saturationStep
+  } else {
+    saturation = hsv.s + saturationStep2 * i
+  }
+  if (saturation > 100) {
+    saturation = 100
+  }
+  if (isLight && i === lightColorCount && saturation > 10) {
+    saturation = 10
+  }
+  if (saturation < 6) {
+    saturation = 6
+  }
+  return saturation
+}
+
+/**
+ * 获取明度渐变
+ * @param hsv - hsv格式颜色值
+ * @param i - 与6的相对距离
+ * @param isLight - 是否是亮颜色
+ */
+function getValue(hsv: HsvColor, i: number, isLight: boolean) {
+  let value: number
+  if (isLight) {
+    value = hsv.v + brightnessStep1 * i
+  } else {
+    value = hsv.v - brightnessStep2 * i
+  }
+  if (value > 100) {
+    value = 100
+  }
+  return value
+}
+
+/**
+ * 给颜色加透明度
+ * @param color - 颜色
+ * @param alpha - 透明度(0 - 1)
+ */
+export function addColorAlpha(color: string, alpha: number) {
+  return colord(color).alpha(alpha).toHex()
+}
+
+/**
+ * 颜色混合
+ * @param firstColor - 第一个颜色
+ * @param secondColor - 第二个颜色
+ * @param ratio - 第二个颜色占比
+ */
+export function mixColor(
+  firstColor: string,
+  secondColor: string,
+  ratio: number
+) {
+  return colord(firstColor).mix(secondColor, ratio).toHex()
+}
+
+/**
+ * 是否是白颜色
+ * @param color - 颜色
+ */
+export function isWhiteColor(color: string) {
+  return colord(color).isEqual('#ffffff')
+}

packages/vite-cli/template/vue/src/utils/common/index.ts

@@ -1,2 +1,3 @@
 export * from './promise'
 export * from './globalFile'
+export * from './color'

packages/vite-cli/theme/naive-ui/App.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { zhCN, dateZhCN } from 'naive-ui'
+import { useThemeStore } from '@/store'
+const theme = useThemeStore()
+console.log(theme)
+</script>
+
+<template>
+  <n-config-provider
+    :theme="theme.naiveTheme"
+    :theme-overrides="theme.naiveThemeOverrides"
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    h-full
+  >
+    <!-- <naive-provider> -->
+    <Welcome />
+    <RouterView />
+    <ThemeSetting />
+    <!-- </naive-provider> -->
+  </n-config-provider>
+</template>
+
+<style>
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+header {
+  line-height: 1.5;
+  max-height: 100vh;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  /* a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  } */
+}
+
+nav {
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+nav a.router-link-exact-active {
+  color: var(--color-text);
+}
+
+nav a.router-link-exact-active:hover {
+  background-color: transparent;
+}
+
+nav a {
+  display: inline-block;
+  padding: 0 1rem;
+  border-left: 1px solid var(--color-border);
+}
+
+nav a:first-of-type {
+  border: 0;
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  nav {
+    text-align: left;
+    margin-left: -1rem;
+    font-size: 1rem;
+
+    padding: 1rem 0;
+    margin-top: 1rem;
+  }
+}
+</style>