refactor(tag): type类型

packages/tag/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @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
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-08-03 17:26:31
  * @FilePath: \uni\packages\tag\index.vue
  * @Description:
  *
@@ -15,7 +15,7 @@
     inline-block
     min-w-128rpx
     h-48rpx
-    fs-24
+    text-24rpx
     font-500
     leh-48
     border-2rpx
@@ -32,9 +32,11 @@ import { computed } from 'vue'
 const props = withDefaults(
   defineProps<{
   /** 类型 */
-    type?: 'default' | 'error' | 'warning'
+    type?: 'default' | 'primary' | 'danger' | 'warning' | 'success' | 'info'
     /** 显示文本 */
     text?: string
+    /** 纯文字，无背景色 */
+    plain?: boolean
   }>(),
   {
     type: 'default',
@@ -42,13 +44,18 @@ const props = withDefaults(
 )
 
 const className = computed(() => {
+  const bg = props.plain ? '' : ' bgc'
   switch (props.type) {
-    case 'error':
-      return 'th-tag-error'
+    case 'danger':
+      return `th-tag-danger${bg}`
+    case 'primary':
+      return `th-tag-primary${bg}`
     case 'warning':
-      return 'th-tag-warning'
+      return `th-tag-warning${bg}`
+    case 'success':
+      return `th-tag-success${bg}`
     default:
-      return 'th-tag-default'
+      return `th-tag-default${bg}`
   }
 })
 </script>
@@ -57,21 +64,42 @@ const className = computed(() => {
 .th-tag {
 
   &.th-tag-default {
-    background-color: #f9f9f9;
     border-color: #cccccc;
     color: #393939;
+    &.bgc {
+      background-color: #f9f9f9;
+    }
   }
 
-  &.th-tag-error {
-    background-color: #fef0f0;
+  &.th-tag-danger {
     border-color: #fbc7c7;
     color: #e43d33;
+    &.bgc{
+      background-color: #fef0f0;
+    }
   }
 
   &.th-tag-warning {
-    background-color: #fff6e8;
     border-color: #f6ddb8;
     color: #f3a73f;
+    &.bgc{
+      background-color: #fff6e8;
+    }
+  }
+
+  &.th-tag-success {
+    border-color: #c8eab7;
+    color: #18bc37;
+    &.bgc {
+      background-color: #f0f9eb;
+    }
+  }
+  &.th-tag-primary {
+    border-color: #bcddff;
+    color: #2979ff;
+    &.bgc{
+      background-color: #f2f7ff;
+    }
   }
 }
 </style>

stories/Tag.stories.ts

@@ -1,8 +1,8 @@
 /*
  * @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
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-08-03 17:29:30
  * @FilePath: \uni\stories\Tag.stories.ts
  * @Description:
  *
@@ -16,9 +16,10 @@ const meta = {
   args: {
     text: '默认',
     type: 'default',
+    plain: false,
   },
   argTypes: {
-    type: { control: 'select', options: ['default', 'warning', 'error'] },
+    type: { control: 'select', options: ['default', 'primary', 'danger', 'warning', 'success', 'info'] },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof ThTag>
@@ -33,6 +34,13 @@ export const Default: Story = {
   },
 }
 
+export const Primary: Story = {
+  args: {
+    text: '主要',
+    type: 'primary',
+  },
+}
+
 export const Warning: Story = {
   args: {
     text: '警告',
@@ -43,7 +51,7 @@ export const Warning: Story = {
 export const ErrorType: Story = {
   name: 'Error',
   args: {
-    text: '错误',
-    type: 'error',
+    text: '危险',
+    type: 'danger',
   },
 }