br-dionysus 1.6.7 → 1.6.8

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

@@ -1,478 +0,0 @@
-<!--皮肤配置-->
-<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

@@ -1,230 +0,0 @@
-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