chore: initialize zui demo project

src/section-title/src/styles/index.ts

+import { createStyleSheet } from '../../../_utils/jss'
+
+export const styles = createStyleSheet({
+  root: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: 16,
+    marginBottom: 16,
+  },
+  main: {
+    minWidth: 0,
+  },
+  title: {
+    margin: 0,
+    color: '#1f2329',
+    fontSize: 18,
+    fontWeight: 600,
+    lineHeight: '26px',
+  },
+  description: {
+    margin: [4, 0, 0],
+    color: '#86909c',
+    fontSize: 14,
+    lineHeight: '22px',
+  },
+})

src/stat-card/demos/basic.vue

+<template>
+  <ZStatCard
+    title="今日访问量"
+    :value="1280"
+    unit="次"
+  />
+</template>
+

src/stat-card/demos/index.md

+# 统计卡片 StatCard
+
+TODO: 补充基础数据卡片、单位、趋势文案、extra 插槽和 footer 插槽示例。
+
+## 演示
+
+<!-- DEMO -->
+
+<demo vue="stat-card/demos/basic.vue" />
+
+<!-- DEMO -->
+
+## API
+
+<!-- API -->
+
+TODO: 对照 `src/stat-card/src/interface.ts` 补充 Props 和 Slots 表格。
+
+<!-- API -->
+

src/stat-card/index.ts

+export * from './src/interface'
+export { default as ZStatCard } from './src/StatCard.vue'

src/stat-card/src/StatCard.vue

+<script setup lang="ts">
+import type { StatCardSlots } from './interface'
+import { computed } from 'vue'
+import { statCardProps } from './interface'
+import { styles } from './styles'
+
+defineOptions({ name: 'ZStatCard' })
+
+const props = defineProps(statCardProps)
+
+defineSlots<StatCardSlots>()
+
+const trendClass = computed(() => {
+  return {
+    up: styles.classes.up,
+    down: styles.classes.down,
+    neutral: styles.classes.neutral,
+  }[props.trend]
+})
+</script>
+
+<template>
+  <section :class="styles.classes.root">
+    <div :class="styles.classes.header">
+      <span :class="styles.classes.title">{{ title }}</span>
+      <slot name="extra" />
+    </div>
+    <div :class="styles.classes.value">
+      {{ value }}
+      <span
+        v-if="unit"
+        :class="styles.classes.unit"
+      >
+        {{ unit }}
+      </span>
+    </div>
+    <div
+      v-if="$slots.footer"
+      :class="[styles.classes.footer, trendClass]"
+    >
+      <slot name="footer" />
+    </div>
+  </section>
+</template>

src/stat-card/src/interface.ts

+import type { ExtractPublicPropTypes, PropType, VNodeChild } from 'vue'
+
+export type StatCardTrend = 'up' | 'down' | 'neutral'
+
+export const statCardProps = {
+  title: {
+    type: String,
+    default: '',
+  },
+  value: {
+    type: [String, Number] as PropType<string | number>,
+    default: '',
+  },
+  unit: String,
+  trend: {
+    type: String as PropType<StatCardTrend>,
+    default: 'neutral',
+  },
+} as const
+
+export type StatCardProps = ExtractPublicPropTypes<typeof statCardProps>
+
+export interface StatCardSlots {
+  extra?: () => VNodeChild
+  footer?: () => VNodeChild
+}

src/stat-card/src/styles/index.ts

+import { createStyleSheet } from '../../../_utils/jss'
+
+export const styles = createStyleSheet({
+  root: {
+    padding: 16,
+    border: '1px solid #e5e6eb',
+    borderRadius: 8,
+    background: '#fff',
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  title: {
+    color: '#4e5969',
+    fontSize: 14,
+  },
+  value: {
+    color: '#1f2329',
+    fontSize: 28,
+    fontWeight: 600,
+    lineHeight: '36px',
+  },
+  unit: {
+    marginLeft: 4,
+    color: '#86909c',
+    fontSize: 14,
+    fontWeight: 400,
+  },
+  footer: {
+    marginTop: 8,
+    fontSize: 13,
+  },
+  up: {
+    color: '#2f9e44',
+  },
+  down: {
+    color: '#d92d20',
+  },
+  neutral: {
+    color: '#86909c',
+  },
+})

src/status-dot/demos/basic.vue

+<template>
+  <ZStatusDot
+    status="success"
+    text="已启用"
+  />
+</template>
+

src/status-dot/demos/index.md

+# 状态点 StatusDot
+
+TODO: 补充默认、处理中、成功、警告、失败和自定义颜色示例。
+
+## 演示
+
+<!-- DEMO -->
+
+<demo vue="status-dot/demos/basic.vue" />
+
+<!-- DEMO -->
+
+## API
+
+<!-- API -->
+
+TODO: 对照 `src/status-dot/src/interface.ts` 补充 Props 和 Slots 表格。
+
+<!-- API -->
+

src/status-dot/index.ts

+export * from './src/interface'
+export { default as ZStatusDot } from './src/StatusDot.vue'

src/status-dot/src/StatusDot.vue

+<script setup lang="ts">
+import type { StatusDotSlots, StatusDotType } from './interface'
+import { computed } from 'vue'
+import { statusDotProps } from './interface'
+import { styles } from './styles'
+
+defineOptions({ name: 'ZStatusDot' })
+
+const props = defineProps(statusDotProps)
+
+defineSlots<StatusDotSlots>()
+
+const colorMap: Record<StatusDotType, string> = {
+  default: '#86909c',
+  processing: '#1677ff',
+  success: '#2f9e44',
+  warning: '#f59f00',
+  error: '#d92d20',
+}
+
+const dotColor = computed(() => props.color || colorMap[props.status])
+</script>
+
+<template>
+  <span :class="styles.classes.root">
+    <span
+      :class="[styles.classes.dot, status === 'processing' ? styles.classes.processing : undefined]"
+      :style="{ backgroundColor: dotColor }"
+    />
+    <span :class="styles.classes.text">
+      <slot>
+        {{ text }}
+      </slot>
+    </span>
+  </span>
+</template>

src/status-dot/src/interface.ts

+import type { ExtractPublicPropTypes, PropType, VNodeChild } from 'vue'
+
+export type StatusDotType = 'default' | 'processing' | 'success' | 'warning' | 'error'
+
+export const statusDotProps = {
+  status: {
+    type: String as PropType<StatusDotType>,
+    default: 'default',
+  },
+  text: String,
+  color: String,
+} as const
+
+export type StatusDotProps = ExtractPublicPropTypes<typeof statusDotProps>
+
+export interface StatusDotSlots {
+  default?: () => VNodeChild
+}

src/status-dot/src/styles/index.ts

+import { createStyleSheet } from '../../../_utils/jss'
+
+export const styles = createStyleSheet({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 6,
+    color: '#1f2329',
+    fontSize: 14,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: '50%',
+  },
+  processing: {
+    boxShadow: '0 0 0 4px rgb(22 119 255 / 0.12)',
+  },
+  text: {
+    lineHeight: '20px',
+  },
+})

src/tag/demos/basic.vue

+<template>
+  <ZTag>默认标签</ZTag>
+</template>
+

src/tag/demos/index.md

+# 标签 Tag
+
+TODO: 补充基础标签、自定义颜色、可关闭标签和插槽内容示例。
+
+## 演示
+
+<!-- DEMO -->
+
+<demo vue="tag/demos/basic.vue" />
+
+<!-- DEMO -->
+
+## API
+
+<!-- API -->
+
+TODO: 对照 `src/tag/src/interface.ts` 补充 Props、Events 和 Slots 表格。
+
+<!-- API -->
+

src/tag/index.ts

+export * from './src/interface'
+export { default as ZTag } from './src/Tag.vue'

src/tag/src/Tag.vue

+<script setup lang="ts">
+import type { TagEvents, TagSlots } from './interface'
+import { tagProps } from './interface'
+import { styles } from './styles'
+
+defineOptions({ name: 'ZTag' })
+
+defineProps(tagProps)
+
+const emit = defineEmits<TagEvents>()
+
+defineSlots<TagSlots>()
+</script>
+
+<template>
+  <span
+    :class="styles.classes.root"
+    :style="{ backgroundColor: color, color: textColor }"
+  >
+    <slot />
+    <button
+      v-if="closable"
+      type="button"
+      :class="styles.classes.close"
+      aria-label="关闭"
+      @click="emit('close')"
+    >
+      ×
+    </button>
+  </span>
+</template>

src/tag/src/interface.ts

+import type { ExtractPublicPropTypes, VNodeChild } from 'vue'
+
+export const tagProps = {
+  color: {
+    type: String,
+    default: '#f2f3f5',
+  },
+  textColor: {
+    type: String,
+    default: '#1f2329',
+  },
+  closable: Boolean,
+} as const
+
+export type TagProps = ExtractPublicPropTypes<typeof tagProps>
+
+export interface TagEvents {
+  (e: 'close'): void
+}
+
+export interface TagSlots {
+  default?: () => VNodeChild
+}

src/tag/src/styles/index.ts

+import { createStyleSheet } from '../../../_utils/jss'
+
+export const styles = createStyleSheet({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 6,
+    minHeight: 24,
+    padding: [2, 8],
+    borderRadius: 4,
+    fontSize: 13,
+    lineHeight: '20px',
+  },
+  close: {
+    'display': 'inline-flex',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'width': 14,
+    'height': 14,
+    'padding': 0,
+    'border': 0,
+    'borderRadius': '50%',
+    'background': 'transparent',
+    'color': 'currentColor',
+    'fontSize': 14,
+    'lineHeight': 1,
+    'cursor': 'pointer',
+    '&:hover': {
+      background: 'rgb(0 0 0 / 0.08)',
+    },
+  },
+})

src/tip/demos/basic.vue

+<template>
+  <ZTip
+    title="温馨提示"
+    content="请先确认信息无误后再提交。"
+  />
+</template>
+