Config Provider 全局配置 ​

<template>
  <div>
    <w-segmented v-model="value" class="mb-8" :options="options">
      <template #default="scope">
        {{ scope.item.label }}
        <span v-if="scope.item.value">({{ scope.item.value }})</span>
      </template>
    </w-segmented>
    <w-config-provider :theme="value">
      <div class="mb-4">
        <w-button type="primary">主题色</w-button>
        <w-button type="primary" disabled>主题色</w-button>
        <w-button type="primary" plain>主题色</w-button>
        <w-button type="primary" disabled plain>主题色</w-button>
      </div>
      <w-table :data="tableData" border>
        <w-table-column width="200" prop="name" label="药品名称" />
        <w-table-column prop="size" label="规格" />
        <w-table-column prop="count" label="数量" />
        <w-table-column prop="price" label="单价(元)" align="right" />
        <w-table-column prop="total" label="金额(元)" align="right" />
      </w-table>
    </w-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')

const options = [
  {
    value: '',
    label: '主色蓝',
  },
  {
    value: 'sauce-purple',
    label: '山梗紫',
  },
  {
    value: 'maternity-pink',
    label: '芙蓉粉',
  },
  {
    value: 'innovation-green',
    label: '松柏绿',
  },
  {
    value: 'calendula',
    label: '落栗棕',
  },
]

const tableData = [
  {
    id: '3',
    name: '炔诺酮片',
    size: '625微克/片',
    count: '10',
    unit: '片',
    price: '10.00',
    total: '100.00',
    parentId: '0',
    check: false,
  },
  {
    id: '4',
    name: '扶达胶囊',
    size: '100毫克/粒',
    count: '5',
    unit: '粒',
    price: '12.00',
    total: '60.00',
    parentId: '0',
    check: false,
  },
  {
    id: '5',
    name: '百士欣胶囊',
    size: '10毫克/粒',
    count: '2',
    unit: '粒',
    price: '22.50',
    total: '45.00',
    parentId: '0',
    check: false,
  },
  {
    id: '6',
    name: '别嘌醇片',
    size: '100毫克/片',
    count: '10',
    unit: '片',
    price: '14.50',
    total: '145.00',
    parentId: '0',
    check: false,
  },
  {
    id: '7',
    name: '复方维生素注射液',
    size: '2毫升/支',
    count: '10',
    unit: '支',
    price: '12.73',
    total: '127.30',
    parentId: '1',
    check: true,
  },
  {
    id: '8',
    name: '注射用盐酸多巴胺',
    size: '20毫升/支',
    count: '6',
    unit: '支',
    price: '49.80',
    total: '298.80',
    parentId: '1',
    check: false,
  },
]
</script>

<template>
  <div>
    <w-segmented v-model="value" class="mb-8" :options="options" />
    <w-config-provider :font-size-base="value">
      <div class="mb-4">
        <w-button type="primary">主题色</w-button>
        <w-button type="primary" disabled>主题色</w-button>
        <w-button type="primary" plain>主题色</w-button>
        <w-button type="primary" disabled plain>主题色</w-button>
      </div>
      <w-dropdown @visible-change="(val: boolean) => (visible = val)">
        <span class="w3-dropdown-link mb-4">
          点击下拉列表
          <w-fake-arrow :is-active="visible" />
        </span>
        <template #dropdown>
          <w-dropdown-menu>
            <w-dropdown-item>待就诊</w-dropdown-item>
            <w-dropdown-item>就诊中</w-dropdown-item>
            <w-dropdown-item>检查中</w-dropdown-item>
            <w-dropdown-item disabled>检验中</w-dropdown-item>
            <w-dropdown-item divided>退出</w-dropdown-item>
          </w-dropdown-menu>
        </template>
      </w-dropdown>
      <w-table :data="tableData" border>
        <w-table-column width="200" prop="name" label="药品名称" />
        <w-table-column prop="size" label="规格" />
        <w-table-column prop="count" label="数量" />
        <w-table-column prop="price" label="单价(元)" align="right" />
        <w-table-column prop="total" label="金额(元)" align="right" />
      </w-table>
    </w-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('14px')

const visible = ref(false)

const options = [
  {
    value: '14px',
    label: '14px',
  },
  {
    value: '16px',
    label: '16px',
  },
  {
    value: '18px',
    label: '18px',
  },
]

const tableData = [
  {
    id: '3',
    name: '炔诺酮片',
    size: '625微克/片',
    count: '10',
    unit: '片',
    price: '10.00',
    total: '100.00',
    parentId: '0',
    check: false,
  },
  {
    id: '4',
    name: '扶达胶囊',
    size: '100毫克/粒',
    count: '5',
    unit: '粒',
    price: '12.00',
    total: '60.00',
    parentId: '0',
    check: false,
  },
  {
    id: '5',
    name: '百士欣胶囊',
    size: '10毫克/粒',
    count: '2',
    unit: '粒',
    price: '22.50',
    total: '45.00',
    parentId: '0',
    check: false,
  },
  {
    id: '6',
    name: '别嘌醇片',
    size: '100毫克/片',
    count: '10',
    unit: '片',
    price: '14.50',
    total: '145.00',
    parentId: '0',
    check: false,
  },
  {
    id: '7',
    name: '复方维生素注射液',
    size: '2毫升/支',
    count: '10',
    unit: '支',
    price: '12.73',
    total: '127.30',
    parentId: '1',
    check: true,
  },
  {
    id: '8',
    name: '注射用盐酸多巴胺',
    size: '20毫升/支',
    count: '6',
    unit: '支',
    price: '49.80',
    total: '298.80',
    parentId: '1',
    check: false,
  },
]
</script>

<template>
  <div>
    <w-button mb-2 @click="toggle">切换语言</w-button>
    <br />

    <w-config-provider :locale="locale">
      <w-table mb-1 :data="[]" />
      <w-pagination :total="100" />
    </w-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import zhCn from 'win-design-next/dist/locale/zh-cn.mjs'
import en from 'win-design-next/dist/locale/en.mjs'

const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

const toggle = () => {
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
}
</script>

<template>
  <div>
    <div class="mb-4 flex items-center gap-8">
      <w-checkbox v-model="config.autoInsertSpace">
        autoInsertSpace
      </w-checkbox>
      <w-config-provider :button="config">
        <w-button>中文</w-button>
      </w-config-provider>
    </div>

    <div class="mb-4 flex items-center gap-8">
      <w-switch
        v-model="config.debounce"
        active-text="开启防抖"
        inactive-text="关闭防抖"
      />
      <w-config-provider :button="config">
        <w-button @click="handleButtonClick">防抖</w-button>
      </w-config-provider>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { WMessage } from 'win-design-next'

const config = reactive({
  autoInsertSpace: true,
  debounce: true,
  debounceTime: 1000,
})

const handleButtonClick = () => {
  console.log('点击事件')
  WMessage({
    message: '点击事件',
    type: 'success',
  })
}
</script>

<template>
  <div>
    <div class="flex gap-4">
      <div class="flex flex-col basis-150px gap-1">
        <span>Type:</span>
        <w-select v-model="config.type">
          <w-option v-for="type in linkTypes" :key="type" :value="type" />
        </w-select>
      </div>
      <div class="flex flex-col basis-150px gap-1">
        <span>Underline:</span>
        <w-select v-model="config.underline">
          <w-option
            v-for="type in underlineOptions"
            :key="type"
            :value="type"
          />
        </w-select>
      </div>
    </div>
    <w-divider />
    <w-config-provider :link="config">
      <w-link>Link desu!</w-link>
    </w-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

import type { LinkConfigContext } from 'win-design-next'

const linkTypes = ['primary', 'success', 'warning', 'info', 'danger', 'default']
const underlineOptions = ['always', 'never', 'hover']

const config = reactive<LinkConfigContext>({
  type: 'success',
  underline: 'always',
})
</script>

<script lang="ts" setup>
import { reactive } from 'vue'

import type { CardConfigContext } from 'win-design-next'

const config = reactive<CardConfigContext>({
  shadow: 'always',
})
</script>

<template>
  Shadow:
  <div class="flex flex-col justify-center">
    <w-radio-group v-model="config.shadow">
      <w-radio value="always">always</w-radio>
      <w-radio value="hover">hover</w-radio>
      <w-radio value="never">never</w-radio>
    </w-radio-group>
    <w-divider />
    <w-config-provider :card="config">
      <w-card>Card desu!</w-card>
    </w-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref, shallowReactive } from 'vue'

import type { ButtonInstance, DialogTransition } from 'win-design-next'

type GlobalConfig = {
  alignCenter: boolean
  draggable: boolean
  overflow: boolean
  transition?: DialogTransition
}

const config = shallowReactive<GlobalConfig>({
  alignCenter: false,
  draggable: false,
  overflow: false,
})
const visible = ref(false)
const enableTransition = ref(false)
const isObjectTransition = ref(false)

const buttonRef = ref<ButtonInstance>()

const ANIMATION_DURATION = 300

const globalConfig = computed<GlobalConfig>(() => {
  let transition: DialogTransition | undefined
  if (enableTransition.value) {
    if (isObjectTransition.value) {
      transition = {
        css: false,
        onBeforeEnter(el) {
          nextTick(() => {
            if (buttonRef.value) {
              const buttonRect = buttonRef.value.ref!.getBoundingClientRect()
              const dialogEl = el.querySelector('.w3-dialog') as HTMLElement

              if (dialogEl) {
                const dialogRect = dialogEl.getBoundingClientRect()

                const offsetX =
                  buttonRect.left +
                  buttonRect.width / 2 -
                  (dialogRect.left + dialogRect.width / 2)
                const offsetY =
                  buttonRect.top +
                  buttonRect.height / 2 -
                  (dialogRect.top + dialogRect.height / 2)

                dialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`
                dialogEl.style.opacity = '0'
              }
            }
          })
        },
        onEnter(el, done) {
          nextTick(() => {
            const dialogEl = el.querySelector('.w3-dialog') as HTMLElement
            if (dialogEl) {
              // force reflow
              dialogEl.offsetHeight

              dialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`
              dialogEl.style.transform = 'translate(0, 0) scale(1)'
              dialogEl.style.opacity = '1'

              // wait for animation to complete, then cleanup inline styles to avoid affecting drag
              setTimeout(() => {
                dialogEl.style.transition = ''
                dialogEl.style.transform = ''
                dialogEl.style.opacity = ''
                done()
              }, ANIMATION_DURATION)
            } else {
              done()
            }
          })
        },
        onLeave(el, done) {
          const dialogEl = el.querySelector('.w3-dialog') as HTMLElement
          if (dialogEl) {
            if (buttonRef.value) {
              const buttonRect = buttonRef.value.ref!.getBoundingClientRect()
              const dialogRect = dialogEl.getBoundingClientRect()

              const currentTransform = dialogEl.style.transform
              let dragOffsetX = 0
              let dragOffsetY = 0

              // avoid draggable effect
              if (currentTransform) {
                const translateMatch = currentTransform.match(
                  /translate\(([^,]+),\s*([^)]+)\)/
                )
                if (translateMatch) {
                  dragOffsetX = Number.parseFloat(translateMatch[1])
                  dragOffsetY = Number.parseFloat(translateMatch[2])
                }
              }

              const offsetX =
                buttonRect.left +
                buttonRect.width / 2 -
                (dialogRect.left + dialogRect.width / 2) +
                dragOffsetX
              const offsetY =
                buttonRect.top +
                buttonRect.height / 2 -
                (dialogRect.top + dialogRect.height / 2) +
                dragOffsetY

              dialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`
              dialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`
              dialogEl.style.opacity = '0'

              // wait for animation to complete, then cleanup inline styles
              setTimeout(() => {
                dialogEl.style.transition = ''
                dialogEl.style.transform = ''
                dialogEl.style.opacity = ''
                done()
              }, ANIMATION_DURATION)
            } else {
              done()
            }
          } else {
            done()
          }
        },
      }
    } else {
      transition = 'dialog-bounce'
    }
  }
  return {
    alignCenter: config.alignCenter,
    draggable: config.draggable,
    overflow: config.overflow,
    transition,
  }
})
</script>

<template>
  <div class="flex flex-col gap-4 justify-center">
    <div class="flex items-center gap-2">
      <w-switch v-model="config.alignCenter" active-text="alignCenter" />
    </div>
    <div class="flex items-center gap-4">
      <w-switch v-model="config.draggable" active-text="draggable" />
      <w-switch
        v-model="config.overflow"
        :disabled="!config.draggable"
        active-text="overflow"
      />
    </div>
    <div class="flex items-center gap-2">
      <w-switch v-model="enableTransition" active-text="enable transition" />
      <w-switch
        v-model="isObjectTransition"
        :disabled="!enableTransition"
        active-text="transition: object"
        inactive-text="transition: string"
      />
    </div>
    <div class="flex items-center gap-2">
      <w-button
        ref="buttonRef"
        type="primary"
        size="small"
        @click="visible = true"
      >
        Open Dialog
      </w-button>
    </div>
    <w-config-provider :dialog="globalConfig">
      <w-dialog v-model="visible" title="Dialog Title" destroy-on-close>
        Dialog Content
      </w-dialog>
    </w-config-provider>
    <div v-if="enableTransition" class="text-xs opacity-70">
      <div v-if="isObjectTransition">
        Using JavaScript controlled animation:
        <code>{{ JSON.stringify(globalConfig.transition) }}</code>
      </div>
      <div v-else>
        Using string transition name:
        <code>{{ globalConfig.transition }}</code>
      </div>
    </div>
  </div>
</template>

<style>
/* Bounce Animation */
.dialog-bounce-enter-active,
.dialog-bounce-leave-active,
.dialog-bounce-enter-active .w3-dialog,
.dialog-bounce-leave-active .w3-dialog {
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dialog-bounce-enter-from,
.dialog-bounce-leave-to {
  opacity: 0;
}

.dialog-bounce-enter-from .w3-dialog,
.dialog-bounce-leave-to .w3-dialog {
  transform: scale(0.3) translateY(-50px);
  opacity: 0;
}
</style>

<template>
  <div>
    <w-config-provider :message="config">
      <w-button @click="open">OPEN</w-button>
    </w-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { WMessage } from 'win-design-next'

const config = reactive({
  max: 3,
})
const open = () => {
  WMessage('This is a message.')
}
</script>

<template>
  <w-config-provider
    :value-on-clear="() => null"
    :empty-values="[undefined, null]"
  >
    <div class="flex flex-wrap gap-4 items-center">
      <w-select
        v-model="value1"
        clearable
        placeholder="Select"
        style="width: 240px"
        @change="handleChange"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
      <w-select-v2
        v-model="value2"
        clearable
        placeholder="Select"
        style="width: 240px"
        :options="options"
        :value-on-clear="() => undefined"
        @change="handleChange"
      />
    </div>
  </w-config-provider>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { WMessage } from 'win-design-next'

const value1 = ref('')
const value2 = ref('')
const options = [
  {
    value: '',
    label: 'All',
  },
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const handleChange = (value) => {
  if ([undefined, null].includes(value)) {
    WMessage.info(`The clear value is: ${value}`)
  }
}
</script>

<template>
  <div>
    <div>
      <w-checkbox v-model="config.showOverflowTooltip">
        showOverflowTooltip
      </w-checkbox>
      <w-select
        v-model="config.tooltipEffect"
        class="ml-5"
        style="max-width: 150px"
      >
        <w-option value="dark" label="dark" />
        <w-option value="light" label="light" />
      </w-select>
    </div>
    <w-divider />
    <w-config-provider :table="config">
      <w-table :data="tableData" style="width: 100%">
        <w-table-column type="selection" width="55" />
        <w-table-column label="入院日期" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </w-table-column>
        <w-table-column property="name" label="患者姓名" width="120" />
        <w-table-column
          property="address"
          label="诊断 (inherited from config-provider)"
          width="300"
        />
        <w-table-column
          property="address"
          label="诊断 (explicit false)"
          :show-overflow-tooltip="false"
        />
      </w-table>
    </w-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

import type { TableConfigContext } from 'win-design-next'

const config = reactive<TableConfigContext>({
  showOverflowTooltip: true,
  tooltipEffect: 'light',
})

interface Patient {
  date: string
  name: string
  address: string
}

const tableData: Patient[] = [
  {
    date: '2026-08-01',
    name: '张伟',
    address: '高血压2级（很高危），冠心病，心功能Ⅱ级（NYHA分级）',
  },
  {
    date: '2026-08-03',
    name: '李娜',
    address: '社区获得性肺炎（右下肺），Ⅱ型呼吸衰竭待排',
  },
  {
    date: '2026-07-28',
    name: '王强',
    address: '右胫骨中段闭合性骨折，左踝软组织挫伤',
  },
  {
    date: '2026-07-15',
    name: '刘秀英',
    address: '脑梗死后遗症期，高血压3级（很高危），2型糖尿病',
  },
]
</script>