xyyd-fatfox/src/layout/sider/ModeSwitch.tsx

import { defineComponent, ref, watch } from 'vue'
import useLayoutStore from '../useLayoutStore'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdVideogameassetTwotone, MdWorkhistoryTwotone, MdStarsTwotone } from 'oh-vue-icons/icons'

addIcons(MdVideogameassetTwotone, MdWorkhistoryTwotone, MdStarsTwotone)

export default defineComponent(() => {
  const hover = ref(false)
  const selected = ref<0 | 1 | 2>(0)
  const layout = useLayoutStore()
  watch(
    () => layout.state.current,
    (val) => {
      selected.value = val
    },
    { immediate: true }
  )
  return () => (
    <div
      class="w-[56px] h-[56px] relative cursor-pointer"
      onMouseenter={() => (hover.value = true)}
      onMouseleave={() => (hover.value = false)}
    >
      <svg width="56" height="56" viewBox="0 0 1 1">
        <circle
          class="relative z-10 transition-all"
          cx="0.5"
          cy="0.5"
          r={hover.value ? 0.4 : 0.44}
          stroke={hover.value ? 'rgba(255,255,255,.8)' : 'rgba(255,255,255,.4)'}
          stroke-width={hover.value ? 0.08 : 0.03}
          fill-opacity={hover.value ? 1 : 0}
          fill={hover.value ? 'rgba(0,0,0,.4)' : 'transparent'}
        />
        <text
          x={hover.value ? '0.23' : '0.28'}
          y={hover.value ? '0.6' : '0.42'}
          font-size={hover.value ? '0.26' : '0.22'}
          class="transition-all"
          fill="white"
        >
          {layout.state.current === 0 ? '游戏' : layout.state.current === 1 ? '工作' : '休闲'}
        </text>
        <text
          x="0.28"
          y="0.68"
          font-size="0.22"
          class="transition-all"
          fill={hover.value ? 'transparent' : 'white'}
        >
          模式
        </text>
      </svg>
      {/* 转盘 */}
      <div
        class={
          'w-[200px] h-[200px] absolute -left-[72px] -top-[72px] rounded-full overflow-hidden transition-all ' +
          (hover.value ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0')
        }
        style="transform-origin: 54% 54%; filter: drop-shadow(0 0 4px rgba(0,0,0,.4));transition-duration:.3s; transition-timing-function: cubic-bezier(.4,0,.2,1)"
      >
        <div class="absolute left-[105px] top-[18px] text-white text-[13px] flex flex-col items-center pointer-events-none">
          <OhVueIcon name="md-videogameasset-twotone" fill="white" scale={1.3} />
          游戏
        </div>
        <div class="absolute left-[150px] top-[80px] text-white text-[13px] flex flex-col items-center pointer-events-none">
          <OhVueIcon name="md-workhistory-twotone" fill="white" scale={1.3} />
          工作
        </div>
        <div class="absolute left-[105px] top-[140px] text-white text-[13px] flex flex-col items-center pointer-events-none">
          <OhVueIcon name="md-stars-twotone" fill="white" scale={1.3} />
          休闲
        </div>
        <svg width="200" height="200" class="w-full h-full" viewBox="0 0 240 240">
          <g>
            <path
              fill="rgba(0,0,0,.6)"
              d="M155.29,94.09c-7.97-10.81-20.68-17.24-34.1-17.24-4.48,0-8.91,.71-13.17,2.1L85.85,11.74c11.31-3.68,23.12-5.54,35.1-5.54,35.71,0,69.72,17.1,91.07,45.78l-56.72,42.12Z"
            />
            <path
              fill="rgba(0,0,0,.6)"
              d="M156.16,143.1c4.83-7.06,7.39-15.31,7.39-23.89s-2.66-17.18-7.7-24.35l56.73-42.13c14.29,19.53,21.84,42.66,21.84,66.93s-7.3,46.62-21.12,65.94l-57.13-42.5Z"
            />
            <path
              fill="rgba(0,0,0,.6)"
              d="M120.94,233.14c-12.09,0-24-1.9-35.41-5.64l22.25-68.1c4.33,1.44,8.83,2.17,13.4,2.17,13.64,0,26.47-6.6,34.43-17.69l57.12,42.5c-21.32,29.29-55.6,46.76-91.79,46.76Z"
            />
          </g>
          {/* 判定区块，无颜色 */}
          <g class="relative z-10">
            <path
              fill="transparent"
              d="M155.29,94.09c-7.97-10.81-20.68-17.24-34.1-17.24-4.48,0-8.91,.71-13.17,2.1L85.85,11.74c11.31-3.68,23.12-5.54,35.1-5.54,35.71,0,69.72,17.1,91.07,45.78l-56.72,42.12Z"
              onMouseenter={() => {
                selected.value = 0
              }}
            />
            <path
              fill="transparent"
              d="M156.16,143.1c4.83-7.06,7.39-15.31,7.39-23.89s-2.66-17.18-7.7-24.35l56.73-42.13c14.29,19.53,21.84,42.66,21.84,66.93s-7.3,46.62-21.12,65.94l-57.13-42.5Z"
              onMouseenter={() => {
                selected.value = 1
              }}
            />
            <path
              fill="transparent"
              d="M120.94,233.14c-12.09,0-24-1.9-35.41-5.64l22.25-68.1c4.33,1.44,8.83,2.17,13.4,2.17,13.64,0,26.47-6.6,34.43-17.69l57.12,42.5c-21.32,29.29-55.6,46.76-91.79,46.76Z"
              onMouseenter={() => {
                selected.value = 2
              }}
            />
          </g>
          <defs>
            <linearGradient
              id="mode-switch-selected"
              x1="154.46"
              y1="119.31"
              x2="233.16"
              y2="119.31"
              gradientUnits="userSpaceOnUse"
            >
              <stop offset="0" stop-color="#fff" />
              <stop offset="1" stop-color="#fff" stop-opacity=".2" />
            </linearGradient>
          </defs>
          <g>
            <path
              class={
                'absolute z-30 transition-all opacity-60 ' +
                (selected.value === 0
                  ? '-rotate-[72deg]'
                  : selected.value === 1
                    ? 'rotate-0'
                    : 'rotate-[72deg]')
              }
              onClick={() => {
                layout.state.current = selected.value
              }}
              style="transform-origin: 50% 50%;"
              fill="url(#mode-switch-selected)"
              d="M154.46,95.56c2.19-2.22,56.63-42.87,56.63-42.87,0,0,22.04,26.2,22,64.39,1.48,38.81-20.93,68.85-20.93,68.85,0,0-55.81-40.54-57.3-42.91,2.37-2.59,16.11-22.46-.41-47.46Z"
            />
            <path
              class={
                'relative transition-all ' +
                (layout.state.current === 0
                  ? '-rotate-[72deg]'
                  : layout.state.current === 1
                    ? 'rotate-0'
                    : 'rotate-[72deg]')
              }
              style="transform-origin: 50% 50%;"
              fill="none"
              stroke="rgba(255,255,255,.8)"
              stroke-linecap="round"
              stroke-miterlimit="10"
              stroke-width="3px"
              d="M215.65,51.3s24,32.56,22,67.67c-1.33,31.11-10.52,53.19-21.41,68.96"
            />
            <path
              class={
                'relative transition-all ' +
                (layout.state.current === 0
                  ? '-rotate-[72deg]'
                  : layout.state.current === 1
                    ? 'rotate-0'
                    : 'rotate-[72deg]')
              }
              style="transform-origin: 50% 50%;"
              fill="rgba(255,255,255,.8)"
              d="M154.51,95.83l4.36-3.41s7.73,10.66,7.5,24.88c1.11,13.7-6.91,29.57-6.91,29.57l-4.63-3.81s5.47-11.68,5.32-24.42c.89-12-5.64-22.8-5.64-22.8Z"
            />
          </g>
        </svg>
      </div>
    </div>
  )
})