br-dionysus 1.6.5 → 1.6.7

package/docs/packages/SkinConfig/src/SkinConfig.vue

@@ -0,0 +1,478 @@
+<!--皮肤配置-->
+<template>
+  <div class="g-skin-config-box">
+    <div
+      class="u-btn"
+      @click="open"
+    >
+      <svg
+        t="1706517168459"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="4378"
+        width="24"
+        height="24"
+      >
+        <path
+          d="M533.333333 853.333333c179.2 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333c0 93.866667 34.133333 132.266667 115.2 157.866667 8.533333 4.266667 12.8 4.266667 21.333334 8.533333 4.266667 0 21.333333 4.266667 21.333333 8.533334 51.2 17.066667 76.8 25.6 98.133333 51.2 17.066667 17.066667 29.866667 38.4 42.666667 59.733333 4.266667 8.533333 8.533333 17.066667 8.533333 21.333333 8.533333 0 8.533333 8.533333 12.8 12.8z m0 42.666667c-59.733333 0-21.333333-42.666667-89.6-110.933333-64-64-273.066667-25.6-273.066666-251.733334C170.666667 332.8 332.8 170.666667 533.333333 170.666667S896 332.8 896 533.333333 733.866667 896 533.333333 896z m72.533334-106.666667c-42.666667 0-76.8-34.133333-76.8-76.8s34.133333-72.533333 76.8-72.533333 76.8 34.133333 76.8 72.533333-34.133333 76.8-76.8 76.8z m0-42.666666c17.066667 0 34.133333-12.8 34.133333-34.133334s-12.8-29.866667-34.133333-29.866666-34.133333 12.8-34.133334 29.866666 17.066667 34.133333 34.133334 34.133334zM640 384c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666666 42.666667 17.066667 42.666667 42.666666-17.066667 42.666667-42.666667 42.666667z m-119.466667-34.133333c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666667 42.666667 17.066667 42.666667 42.666667-17.066667 42.666667-42.666667 42.666667zM725.333333 469.333333c-25.6 0-42.666667-17.066667-42.666666-42.666666s17.066667-42.666667 42.666666-42.666667 42.666667 17.066667 42.666667 42.666667-17.066667 42.666667-42.666667 42.666666zM405.333333 384c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666666 42.666667 17.066667 42.666667 42.666666-17.066667 42.666667-42.666667 42.666667z"
+          fill="#444444"
+          p-id="4379"
+        ></path>
+      </svg>
+    </div>
+
+    <el-drawer
+      v-model="drawer"
+      direction="rtl"
+      :withHeader="false"
+      size="300"
+    >
+      <h2 class="u-tt">主题配置</h2>
+      <div class="u-box">
+        <el-divider class="u-box-tt">主题模式</el-divider>
+        <div class="u-group">
+          <label>深色主题</label>
+          <el-switch
+            v-model="skinConfig.darkTheme"
+            :size="skinConfig.size"
+            @change="skin.apply();skin.save();emit('change', skinConfig)"
+          />
+        </div>
+        <div class="u-group">
+          <label>跟随系统</label>
+          <el-switch
+            v-model="skinConfig.followSystem"
+            :size="skinConfig.size"
+            @change="skin.apply();skin.save();emit('change', skinConfig)"
+          />
+        </div>
+        <div class="u-group">
+          <label>元素大小</label>
+          <el-radio-group
+            v-model="skinConfig.size"
+            :size="skinConfig.size"
+            @change="skin.apply();skin.save();emit('change', skinConfig)"
+          >
+            <el-radio-button
+              v-for="item in filter.sizeOptions.value"
+              :key="item.value"
+              :label="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="u-group">
+          <label>滚动条宽度</label>
+          <m-input-number
+            class="u-it"
+            v-model="skinConfig.scrollBarWidth"
+            :size="skinConfig.size"
+            @change="skin.apply();skin.save();emit('change', skinConfig)"
+          >
+          </m-input-number>
+        </div>
+        <el-divider class="u-box-tt">系统主题</el-divider>
+        <el-tabs
+          v-model="ruleForm.type"
+          :size="skinConfig.size"
+          class="u-tabs"
+          @tabClick="tabChange"
+        >
+          <el-tab-pane
+            v-for="item in filter.typeOptions.value"
+            :key="item.value"
+            :label="item.label"
+            :name="item.value"
+          >
+          </el-tab-pane>
+        </el-tabs>
+        <div
+          class="u-gulp"
+          v-if="ruleForm.type === 'primary'"
+        >
+          <ul class="u-list">
+            <li
+              class="u-li"
+              v-for="color in colorCard"
+              :key="color"
+            >
+              <div
+                class="u-color"
+                :style="getColorCardStyle(color)"
+                @click="skin.setColor('primary', color);emit('change', skinConfig)"
+              >
+                <el-icon v-if="skinConfig.primaryColor === color"><Check /></el-icon>
+              </div>
+            </li>
+          </ul>
+          <div class="u-pc">
+            <el-color-picker
+              v-model="skinConfig.primaryColor"
+              colorFormat="hex"
+              @change="skin.setColor('primary', skinConfig.primaryColor);emit('change', skinConfig)"
+            />
+          </div>
+        </div>
+        <div
+          class="u-gulp"
+          v-if="ruleForm.type === 'success'"
+        >
+          <ul class="u-list">
+            <li
+              class="u-li"
+              v-for="color in colorCard"
+              :key="color"
+            >
+              <div
+                class="u-color"
+                :style="getColorCardStyle(color)"
+                @click="skin.setColor('success', color);emit('change', skinConfig)"
+              >
+                <el-icon v-if="skinConfig.successColor === color"><Check /></el-icon>
+              </div>
+            </li>
+          </ul>
+          <div class="u-pc">
+            <el-color-picker
+              v-model="skinConfig.successColor"
+              colorFormat="hex"
+              @change="skin.setColor('success', skinConfig.successColor);emit('change', skinConfig)"
+            />
+          </div>
+        </div>
+        <div
+          class="u-gulp"
+          v-if="ruleForm.type === 'warning'"
+        >
+          <ul class="u-list">
+            <li
+              class="u-li"
+              v-for="color in colorCard"
+              :key="color"
+            >
+              <div
+                class="u-color"
+                :style="getColorCardStyle(color)"
+                @click="skin.setColor('warning', color);emit('change', skinConfig)"
+              >
+                <el-icon v-if="skinConfig.warningColor === color"><Check /></el-icon>
+              </div>
+            </li>
+          </ul>
+          <div class="u-pc">
+            <el-color-picker
+              v-model="skinConfig.warningColor"
+              colorFormat="hex"
+              @change="skin.setColor('warning', skinConfig.warningColor);emit('change', skinConfig)"
+            />
+          </div>
+        </div>
+        <div
+          class="u-gulp"
+          v-if="ruleForm.type === 'danger'"
+        >
+          <ul class="u-list">
+            <li
+              class="u-li"
+              v-for="color in colorCard"
+              :key="color"
+            >
+              <div
+                class="u-color"
+                :style="getColorCardStyle(color)"
+                @click="skin.setColor('danger', color);emit('change', skinConfig)"
+              >
+                <el-icon v-if="skinConfig.dangerColor === color"><Check /></el-icon>
+              </div>
+            </li>
+          </ul>
+          <div class="u-pc">
+            <el-color-picker
+              v-model="skinConfig.dangerColor"
+              colorFormat="hex"
+              @change="skin.setColor('danger', skinConfig.dangerColor);emit('change', skinConfig)"
+            />
+          </div>
+        </div>
+        <div
+          class="u-gulp"
+          v-if="ruleForm.type === 'info'"
+        >
+          <ul class="u-list">
+            <li
+              class="u-li"
+              v-for="color in colorCard"
+              :key="color"
+            >
+              <div
+                class="u-color"
+                :style="getColorCardStyle(color)"
+                @click="skin.setColor('info', color);emit('change', skinConfig)"
+              >
+                <el-icon v-if="skinConfig.infoColor === color"><Check /></el-icon>
+              </div>
+            </li>
+          </ul>
+          <div class="u-pc">
+            <el-color-picker
+              v-model="skinConfig.infoColor"
+              colorFormat="hex"
+              @change="skin.setColor('info', skinConfig.infoColor);emit('change', skinConfig)"
+            />
+          </div>
+        </div>
+        <el-button
+          type="warning"
+          :size="skinConfig.size"
+          @click="skin.reset"
+        >
+          重置当前配置
+        </el-button>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+import useSkin, { SkinConfig } from './useSkin'
+import { Size } from 'packages/typings/enum'
+import { Filter } from 'packages/typings/interface'
+import { MInputNumber } from 'packages/MInputNumber'
+
+const drawer = ref<boolean>(false)
+const open = () => {
+  drawer.value = true
+}
+
+const filter: Filter = {
+  typeOptions: ref<Option[]>([{
+    label: '主题',
+    value: 'primary'
+  }, {
+    label: '成功',
+    value: 'success'
+  }, {
+    label: '警告',
+    value: 'warning'
+  }, {
+    label: '危险',
+    value: 'danger'
+  }, {
+    label: '信息',
+    value: 'info'
+  }]),
+  sizeOptions: ref<Option[]>([{
+    label: '大',
+    value: Size.LARGE
+  }, {
+    label: '中',
+    value: Size.DEFAULT
+  }, {
+    label: '小',
+    value: Size.SMALL
+  }])
+}
+const skin = useSkin()
+const skinConfig = skin.skinConfig
+
+interface RuleFormType {
+  type: string,
+  color: string
+}
+const ruleForm: RuleFormType = reactive<RuleFormType>({
+  type: 'primary',
+  color: skinConfig.primaryColor
+})
+const tabChange = () => {
+  setTimeout(() => {
+    if (ruleForm.type === 'primary') ruleForm.color = skinConfig.primaryColor
+    if (ruleForm.type === 'success') ruleForm.color = skinConfig.successColor
+    if (ruleForm.type === 'warning') ruleForm.color = skinConfig.warningColor
+    if (ruleForm.type === 'danger') ruleForm.color = skinConfig.dangerColor
+    if (ruleForm.type === 'info') ruleForm.color = skinConfig.infoColor
+  })
+}
+
+const emit = defineEmits(['change'])
+
+// 色卡24色
+const colorCard: string[] = [
+  '#1690ff',
+  '#419eff',
+  '#007aff',
+  '#59c8fa',
+  '#646CFF',
+  '#536dfe',
+  '#646cff',
+  '#9c28b0',
+  '#af52de',
+  '#0096c7',
+  '#04c1d4',
+  '#67c23a',
+  '#42a047',
+  '#7cb342',
+  '#c0ca34',
+  '#78dec7',
+  '#e53834',
+  '#d81a60',
+  '#f4511e',
+  '#f56c6c',
+  '#e6a23c',
+  '#ffb300',
+  '#fdd835',
+  '#909399'
+]
+const getColorCardStyle = (color: string) => ({
+  background: color
+})
+onMounted(() => {
+  skin.apply()
+})
+
+const setSkin = (config: SkinConfig) => {
+  skinConfig.darkTheme = config?.darkTheme === undefined ? skinConfig.darkTheme : config.darkTheme
+  skinConfig.followSystem = config?.followSystem === undefined ? skinConfig.followSystem : config.followSystem
+  skinConfig.size = config?.size === undefined ? skinConfig.size : config.size
+  skinConfig.scrollBarWidth = config?.scrollBarWidth === undefined ? skinConfig.scrollBarWidth : config.scrollBarWidth
+  skinConfig.primaryColor = config?.primaryColor === undefined ? skinConfig.primaryColor : config.primaryColor
+  skinConfig.successColor = config?.successColor === undefined ? skinConfig.successColor : config.successColor
+  skinConfig.warningColor = config?.warningColor === undefined ? skinConfig.warningColor : config.warningColor
+  skinConfig.dangerColor = config?.dangerColor === undefined ? skinConfig.dangerColor : config.dangerColor
+  skinConfig.infoColor = config?.infoColor === undefined ? skinConfig.infoColor : config.infoColor
+  skin.apply()
+  skin.save()
+}
+
+const getSkin = () => skinConfig
+
+defineExpose({
+  setSkin,
+  getSkin
+})
+</script>
+
+<style scoped lang="scss">
+.g-skin-config-box {
+  display: flex;
+
+  .u-tt {
+    padding: 0 24px;
+    line-height: 50px;
+    box-shadow: 0 1px 2px rgba(0, 21, 41, 0.08);
+  }
+
+  .u-box {
+    display: flex;
+    padding: 20px 24px;
+    height: calc(100% - 50px);
+    flex-direction: column;
+
+    .u-box-tt {
+      margin: 34px 0;
+    }
+
+    .u-group {
+      display: flex;
+      margin-bottom: 12px;
+      justify-content: space-between;
+      align-items: center;
+      color: var(--m-fc-body);
+    }
+
+    .u-gulp {
+      display: flex;
+      margin: 0 -10px;
+      flex-direction: column;
+      flex-wrap: wrap;
+      flex: 1;
+    }
+
+    .u-list {
+      display: flex;
+      flex-wrap: wrap;
+
+      .u-li {
+        display: flex;
+        margin-bottom: 10px;
+        width: 12.5%;
+        justify-content: center;
+
+        .u-color {
+          display: flex;
+          width: 20px;
+          height: 20px;
+          color: #fff;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .u-pc {
+    display: flex;
+    margin-top: 10px;
+    width: 100%;
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+.u-btn {
+  display: flex;
+  font-size: 18px;
+  color: var(--el-color-primary);
+  cursor: pointer;
+
+  svg path {
+    stroke: var(--el-color-primary);
+    fill: var(--el-color-primary);
+  }
+}
+
+.u-slt {
+  width: 100px;
+}
+
+.u-it {
+  width: 106px;
+}
+</style>
+
+<style lang="scss">
+.g-skin-config-box {
+  .el-drawer__body {
+    padding: 0;
+  }
+
+  .el-switch {
+    height: auto;
+  }
+
+  .u-pc {
+    display: flex;
+    justify-content: center;
+
+    .el-color-picker {
+      width: 100%;
+
+      .el-color-picker__trigger {
+        width: 100%;
+        height: 34px;
+      }
+    }
+  }
+
+  .u-tabs {
+    .el-tabs__item {
+      padding: 0 10px;
+    }
+  }
+}
+</style>

package/docs/packages/SkinConfig/src/useSkin.ts

@@ -0,0 +1,230 @@
+import { reactive } from 'vue'
+import { Size } from 'packages/typings/enum'
+import compareStructures from '../../../tool/compareStructures'
+import usePackageConfig from 'packages/Hook/usePackageConfig/usePackageConfig'
+
+const packageConfig = usePackageConfig()
+
+/**
+ * @description 颜色计算
+ * @param {string} hex 十六进制颜色值
+ * @param {number} percent 百分比，正值变亮，负值变暗
+ * @returns {string} 十六进制颜色值
+ * */
+const adjustColor = (hex: string, percent: number = 100): string => {
+  hex = hex.replace('#', '').toLowerCase()
+
+  if (hex.length === 3) {
+    hex = hex.split('').map(c => c + c).join('')
+  }
+
+  let r: any = parseInt(hex.substring(0, 2), 16)
+  let g: any = parseInt(hex.substring(2, 4), 16)
+  let b: any = parseInt(hex.substring(4, 6), 16)
+
+  // 变亮
+  if (percent > 0) {
+    r += Math.round((255 - r) * (percent / 100))
+    g += Math.round((255 - g) * (percent / 100))
+    b += Math.round((255 - b) * (percent / 100))
+  }
+  // 变暗
+  if (percent <= 0) {
+    r += Math.round(r * (percent / 100))
+    g += Math.round(g * (percent / 100))
+    b += Math.round(b * (percent / 100))
+  }
+
+  r = r.toString(16).padStart(2, '0')
+  g = g.toString(16).padStart(2, '0')
+  b = b.toString(16).padStart(2, '0')
+
+  // 返回十六进制颜色值
+  return `#${r}${g}${b}`
+}
+
+export interface SkinConfig {
+  /** 深色主题 */
+  darkTheme: boolean,
+  /** 跟随系统 */
+  followSystem: boolean,
+  /** 组件大小 */
+  size: Size,
+  /** 滚动条宽度 */
+  scrollBarWidth: number,
+  /** 主题色 */
+  primaryColor: string,
+  /** 成功色 */
+  successColor: string,
+  /** 警告色 */
+  warningColor: string,
+  /** 危险色 */
+  dangerColor: string,
+  /** 信息色 */
+  infoColor: string,
+}
+
+/**
+ * @description 主题皮肤
+ * @returns {Object} {
+ *     skinConfig,
+ *     reset,
+ *     setColor,
+ *     apply,
+ *     save,
+ *     switchDark
+ *   }
+ */
+const useSkin = (): {
+  skinConfig: SkinConfig,
+  reset: Function,
+  setColor: Function,
+  apply: Function,
+  save: Function,
+  switchDark: Function
+} => {
+  const defaultSkinConfig: SkinConfig = {
+    darkTheme: false,
+    followSystem: false,
+    size: Size.DEFAULT,
+    scrollBarWidth: 5,
+    primaryColor: '#646CFF',
+    successColor: '#67c23a',
+    warningColor: '#e6a23c',
+    dangerColor: '#f56c6c',
+    infoColor: '#909399'
+  }
+
+  // 清洗数据
+  const skinConfigData = packageConfig.get('skinConfig')
+  // 数据结构不一致，既认为为不同版本需要清洗
+  if (!compareStructures(skinConfigData, defaultSkinConfig)) {
+    packageConfig.set('skinConfig', defaultSkinConfig)
+  }
+
+  /** 皮肤配置 */
+  const skinConfig: SkinConfig = reactive(packageConfig.get('skinConfig'))
+
+  /**
+   * @description 设置皮肤色
+   * @param {string} type 类型
+   * @param {string} color 颜色
+   */
+  const setColor = (type: string, color: string) => {
+    if (type === 'primary') skinConfig.primaryColor = color
+    if (type === 'success') skinConfig.successColor = color
+    if (type === 'warning') skinConfig.warningColor = color
+    if (type === 'danger') skinConfig.dangerColor = color
+    if (type === 'info') skinConfig.infoColor = color
+    apply()
+    save()
+  }
+  /**
+   * @description 重置主题色
+   */
+  const reset = () => {
+    skinConfig.darkTheme = defaultSkinConfig.darkTheme
+    skinConfig.followSystem = defaultSkinConfig.followSystem
+    skinConfig.size = defaultSkinConfig.size
+    skinConfig.scrollBarWidth = defaultSkinConfig.scrollBarWidth
+    skinConfig.primaryColor = defaultSkinConfig.primaryColor
+    skinConfig.successColor = defaultSkinConfig.successColor
+    skinConfig.warningColor = defaultSkinConfig.warningColor
+    skinConfig.dangerColor = defaultSkinConfig.dangerColor
+    skinConfig.infoColor = defaultSkinConfig.infoColor
+    apply()
+    save()
+  }
+
+  /**
+   * @description 应用皮肤配置
+   */
+  const apply = () => {
+    // 是否为暗夜模式
+    const isDark: boolean = skinConfig.darkTheme || (skinConfig.followSystem && (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches))
+    const getThisPercent = (percent: number) => isDark ? -percent : percent
+
+    const rootStyle = document.documentElement.style
+
+    const setColor = (type: 'primary' | 'success' | 'warning' | 'danger' | 'info') => {
+      const key = (type + 'Color') as keyof typeof skinConfig
+      const color = skinConfig[key] as string
+      // 主色
+      rootStyle.setProperty(`--el-color-${type}`, color)
+      // 主色2
+      rootStyle.setProperty(`--el-color-${type}-dark-2`, adjustColor(color, getThisPercent(50)))
+      // 主色(亮)3
+      rootStyle.setProperty(`--el-color-${type}-light-3`, adjustColor(color, getThisPercent(25)))
+      // 主色(亮)5
+      rootStyle.setProperty(`--el-color-${type}-light-5`, adjustColor(color, getThisPercent(40)))
+      // 主色(亮)7
+      rootStyle.setProperty(`--el-color-${type}-light-7`, adjustColor(color, getThisPercent(60)))
+      // 主色(亮)8
+      rootStyle.setProperty(`--el-color-${type}-light-8`, adjustColor(color, getThisPercent(75)))
+      // 主色(亮)9
+      rootStyle.setProperty(`--el-color-${type}-light-9`, adjustColor(color, getThisPercent(90)))
+    }
+
+    // 主题色
+    setColor('primary')
+    // 成功色
+    setColor('success')
+    // 警告色
+    setColor('warning')
+    // 危险色
+    setColor('danger')
+    // 信息色
+    setColor('info')
+
+    // 滚动条颜色
+    rootStyle.setProperty('--m-scrollbar-thumb-color', adjustColor(skinConfig.primaryColor, getThisPercent(70)))
+    // 滚动条hover颜色
+    rootStyle.setProperty('--m-scrollbar-thumb-hover-color', adjustColor(skinConfig.primaryColor, getThisPercent(50)))
+
+    if (skinConfig.size === Size.SMALL) skinConfig.scrollBarWidth = 5
+    if (skinConfig.size === Size.DEFAULT) skinConfig.scrollBarWidth = 8
+    if (skinConfig.size === Size.LARGE) skinConfig.scrollBarWidth = 10
+    // 滚动条宽度
+    rootStyle.setProperty('--m-scrollbar-thumb-width', skinConfig.scrollBarWidth + 'px')
+
+    switchDark(isDark)
+
+    switchSize(skinConfig.size)
+  }
+
+  /**
+   * @description 切换暗夜模式
+   * @param {boolean} isDark 是否为暗夜模式
+   */
+  const switchDark = (isDark: boolean = false) => {
+    skinConfig.darkTheme = isDark
+    document.documentElement.setAttribute('data-dark', String(isDark))
+  }
+
+  /**
+   * @description 切换组件大小
+   * @param {string} sizeMode 组件大小模式
+   */
+  const switchSize = (sizeMode: Size = Size.DEFAULT) => {
+    skinConfig.size = sizeMode
+    document.documentElement.setAttribute('data-size', sizeMode)
+  }
+
+  /**
+   * @description 保存皮肤配置到本地
+   */
+  const save = () => {
+    packageConfig.set('skinConfig', skinConfig)
+  }
+
+  return {
+    skinConfig,
+    reset,
+    setColor,
+    apply,
+    save,
+    switchDark
+  }
+}
+
+export default useSkin