feat: 展示组件/Tag

packages/tag/index.vue

@@ -0,0 +1,77 @@
+<!--
+ * @Author: peerless_hero peerless_hero@outlook.com
+ * @Date: 2023-07-11 02:12:08
+ * @LastEditors: peerless_hero peerless_hero@outlook.com
+ * @LastEditTime: 2023-07-11 03:15:44
+ * @FilePath: \uni\packages\tag\index.vue
+ * @Description:
+ *
+-->
+<template>
+  <Text
+    class="th-tag"
+    :class="className"
+    text-center
+    inline-block
+    min-w-128rpx
+    h-48rpx
+    fs-24
+    font-500
+    leh-48
+    border-2rpx
+    border-solid
+    rounded-16rpx
+  >
+    &nbsp;&nbsp;&nbsp;{{ text }}&nbsp;&nbsp;&nbsp;
+  </Text>
+</template>
+
+<script lang="ts" setup name="Tag">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+  /** 类型 */
+    type?: 'default' | 'error' | 'warning'
+    /** 显示文本 */
+    text?: string
+  }>(),
+  {
+    type: 'default',
+  },
+)
+
+const className = computed(() => {
+  switch (props.type) {
+    case 'error':
+      return 'th-tag-error'
+    case 'warning':
+      return 'th-tag-warning'
+    default:
+      return 'th-tag-default'
+  }
+})
+</script>
+
+<style lang="scss">
+.th-tag {
+
+  &.th-tag-default {
+    background-color: #f9f9f9;
+    border-color: #cccccc;
+    color: #393939;
+  }
+
+  &.th-tag-error {
+    background-color: #fef0f0;
+    border-color: #fbc7c7;
+    color: #e43d33;
+  }
+
+  &.th-tag-warning {
+    background-color: #fff6e8;
+    border-color: #f6ddb8;
+    color: #f3a73f;
+  }
+}
+</style>

stories/Tag.stories.ts

@@ -0,0 +1,49 @@
+/*
+ * @Author: peerless_hero peerless_hero@outlook.com
+ * @Date: 2023-07-11 02:12:08
+ * @LastEditors: peerless_hero peerless_hero@outlook.com
+ * @LastEditTime: 2023-07-11 03:02:55
+ * @FilePath: \uni\stories\Tag.stories.ts
+ * @Description:
+ *
+ */
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ThTag from '../packages/tag/index.vue'
+
+const meta = {
+  title: '展示组件/Tag',
+  component: ThTag,
+  args: {
+    text: '默认',
+    type: 'default',
+  },
+  argTypes: {
+    type: { control: 'select', options: ['default', 'warning', 'error'] },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ThTag>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    text: '默认',
+    type: 'default',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    text: '警告',
+    type: 'warning',
+  },
+}
+
+export const ErrorType: Story = {
+  name: 'Error',
+  args: {
+    text: '错误',
+    type: 'error',
+  },
+}