feat(shared): 新增工具栏组件

Author: l246804

src/shared/toolbar/index.css

@@ -0,0 +1,57 @@
+:where(.kit-toolbar) {
+  --gap: calc(1em * 0.8);
+  --title-font-size: calc(1em + 2px);
+  --title-font-weight: 600;
+  --divider-color: #a0a0a0;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--gap);
+}
+
+:where(.kit-toolbar),
+:where(.kit-toolbar) [class^='kit-toolbar__'] {
+  box-sizing: border-box;
+}
+
+:where(.kit-toolbar) > .kit-toolbar__left {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+:where(.kit-toolbar) > .kit-toolbar__left > .kit-toolbar__title {
+  font-size: var(--title-font-size);
+  font-weight: var(--title-font-weight);
+}
+
+:where(.kit-toolbar) > .kit-toolbar__left > .kit-toolbar__divider {
+  position: relative;
+  display: inline-block;
+  width: 1px;
+  height: 1em;
+  border-left: 1px var(--divider-color) solid;
+  margin: 0 0.6em;
+  vertical-align: middle;
+}
+
+:where(.kit-toolbar)
+  > .kit-toolbar__left:has(> .kit-toolbar__title:empty, > .kit-toolbar__content:empty)
+  > .kit-toolbar__divider {
+  display: none;
+}
+
+:where(.kit-toolbar) > .kit-toolbar__left > .kit-toolbar__content,
+:where(.kit-toolbar) > .kit-toolbar__extra {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+}
+
+:where(.kit-toolbar) > .kit-toolbar__left > .kit-toolbar__content > *,
+:where(.kit-toolbar) > .kit-toolbar__extra > * {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}

src/shared/toolbar/index.ts

@@ -0,0 +1,2 @@
+export { default as Toolbar } from './index.vue'
+export type * from './interface'

src/shared/toolbar/index.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { ToolbarProps, ToolbarSlots } from './interface'
+import { loadCSS } from '@/internal/load-css'
+import css from './index.css?raw'
+
+defineOptions({
+  __cKitStaticCSS: css,
+})
+
+defineProps<ToolbarProps>()
+
+defineSlots<ToolbarSlots>()
+
+loadCSS()
+
+const ns = 'kit-toolbar'
+</script>
+
+<template>
+  <div :class="ns">
+    <div :class="[`${ns}__left`]">
+      <div
+        :style="titleStyle"
+        :class="[`${ns}__title`, titleClass]"
+      >
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+
+      <div :class="[`${ns}__divider`]" />
+
+      <div
+        :class="[`${ns}__content`, contentClass]"
+        :style="contentStyle"
+      >
+        <slot />
+      </div>
+    </div>
+
+    <div
+      :class="[`${ns}__extra`, extraClass]"
+      :style="extraStyle"
+    >
+      <slot name="extra" />
+    </div>
+  </div>
+</template>

src/shared/toolbar/interface.ts

@@ -0,0 +1,23 @@
+import type { StyleValue, VNodeChild } from 'vue'
+
+export interface ToolbarProps {
+  titleStyle?: StyleValue
+  titleClass?: any
+
+  contentStyle?: StyleValue
+  contentClass?: any
+
+  extraStyle?: StyleValue
+  extraClass?: any
+
+  /**
+   * 标题，优先级低于 title 插槽
+   */
+  title?: string
+}
+
+export interface ToolbarSlots {
+  title: () => VNodeChild
+  default: () => VNodeChild
+  extra: () => VNodeChild
+}