feat: tag样式优化

src/components/StatusTag/StatusTag.module.less

@@ -0,0 +1,123 @@
+.statusTag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  letter-spacing: 0.2px;
+
+  &.dimmed {
+    opacity: 0.55;
+  }
+
+  .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+}
+
+.primary {
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.08);
+  border-color: rgba(22, 119, 255, 0.18);
+
+  .dot {
+    background: #1677ff;
+    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
+  }
+}
+
+.success {
+  color: #389e0d;
+  background: rgba(82, 196, 26, 0.1);
+  border-color: rgba(82, 196, 26, 0.22);
+
+  .dot {
+    background: #52c41a;
+    box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.15);
+  }
+}
+
+.warning {
+  color: #d48806;
+  background: rgba(250, 173, 20, 0.12);
+  border-color: rgba(250, 173, 20, 0.28);
+
+  .dot {
+    background: #faad14;
+    box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.18);
+  }
+}
+
+.danger {
+  color: #cf1322;
+  background: rgba(255, 77, 79, 0.08);
+  border-color: rgba(255, 77, 79, 0.2);
+
+  .dot {
+    background: #ff4d4f;
+    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.15);
+  }
+}
+
+.orange {
+  color: #d46b08;
+  background: rgba(250, 140, 22, 0.1);
+  border-color: rgba(250, 140, 22, 0.22);
+
+  .dot {
+    background: #fa8c16;
+    box-shadow: 0 0 0 2px rgba(250, 140, 22, 0.15);
+  }
+}
+
+.cyan {
+  color: #08979c;
+  background: rgba(19, 194, 194, 0.1);
+  border-color: rgba(19, 194, 194, 0.22);
+
+  .dot {
+    background: #13c2c2;
+    box-shadow: 0 0 0 2px rgba(19, 194, 194, 0.15);
+  }
+}
+
+.purple {
+  color: #531dab;
+  background: rgba(114, 46, 209, 0.08);
+  border-color: rgba(114, 46, 209, 0.2);
+
+  .dot {
+    background: #722ed1;
+    box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.15);
+  }
+}
+
+.neutral {
+  color: rgba(0, 0, 0, 0.55);
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.08);
+
+  .dot {
+    background: rgba(0, 0, 0, 0.25);
+    box-shadow: none;
+  }
+}
+
+.default {
+  color: rgba(0, 0, 0, 0.65);
+  background: #fafafa;
+  border-color: #f0f0f0;
+
+  .dot {
+    background: rgba(0, 0, 0, 0.2);
+    box-shadow: none;
+  }
+}

src/components/StatusTag/StatusTag.tsx

@@ -0,0 +1,37 @@
+import { defineComponent, type PropType } from 'vue';
+import styles from './StatusTag.module.less';
+
+export type StatusTagTone =
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'orange'
+  | 'cyan'
+  | 'purple'
+  | 'neutral'
+  | 'default';
+
+const StatusTag = defineComponent({
+  name: 'StatusTag',
+  props: {
+    label: { type: String, required: true },
+    tone: { type: String as PropType<StatusTagTone>, default: 'default' },
+    showDot: { type: Boolean, default: true },
+    dimmed: { type: Boolean, default: false },
+  },
+  setup(props) {
+    return () => (
+      <span
+        class={[styles.statusTag, styles[props.tone], props.dimmed && styles.dimmed]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {props.showDot ? <span class={styles.dot} /> : null}
+        <span>{props.label}</span>
+      </span>
+    );
+  },
+});
+
+export default StatusTag;

src/components/StatusTag/index.ts

@@ -0,0 +1,2 @@
+export { default as StatusTag } from './StatusTag';
+export type { StatusTagTone } from './StatusTag';

src/components/index.ts

@@ -4,4 +4,6 @@
  */
 export { default as HelloWorld } from './HelloWorld';
 export { default as ChangePasswordModal } from './ChangePasswordModal';
-export { default as PageTabs } from './pageTabs/PageTabs';
+export { default as PageTabs } from './PageTabs/PageTabs';
+export { StatusTag } from './StatusTag';
+export type { StatusTagTone } from './StatusTag';