@rainbow-oh/yee-c 0.3.0 → 0.4.0

package/dist/cjs/Form/demo/basic.js

@@ -39,87 +39,62 @@ var basic_default = () => {
   const onFinish = (values) => {
     console.log("Received values:", values);
   };
-  const [, setState] = import_react.default.useState({});
-  (0, import_react.useEffect)(() => {
-    setTimeout(() => {
-      form.setFieldsValue({
-        address: [
-          {
-            one: "123 Main St"
-          }
-        ]
-      });
-    }, 2e3);
-  }, []);
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_yee_c.Form,
+  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, onFinish, "data-testid": "basic-form" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Form.Field,
     {
-      form,
-      onFinish,
-      layout: "vertical",
-      "data-testid": "basic-form",
-      onValuesChange: (field) => {
-        setState(field);
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Form.Field,
-      {
-        name: "username",
-        label: "Username",
-        rules: [
-          {
-            required: true,
-            message: "Please input your username!",
-            validateTrigger: ["onChange", "onSubmit"]
+      name: "username",
+      label: "Username",
+      rules: [
+        {
+          required: true,
+          message: "Please input your username!",
+          validateTrigger: ["onChange", "onSubmit"]
+        },
+        {
+          validateTrigger: "onBlur",
+          validator: (value) => {
+            console.log("Validating username:", value);
+            if (typeof value === "string" && value.length < 5) {
+              return false;
+            }
+            return true;
           },
-          {
-            validateTrigger: "onBlur",
-            validator: (value) => {
-              console.log("Validating username:", value);
-              if (typeof value === "string" && value.length < 5) {
-                return false;
-              }
-              return true;
-            },
-            message: "Username must be at least 5 characters long"
-          }
-        ]
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your username" })
-    )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Form.Field,
-      {
-        name: "password",
-        label: "Password",
-        rules: [
-          { required: true, message: "Please input your password!" },
-          {
-            minLength: 10,
-            validateTrigger: "onBlur",
-            message: "Password length must be longer than 10"
-          }
-        ]
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input.Password, { placeholder: "Please input your password" })
-    )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "gender", label: "Gender", initialValue: "male" }, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Select,
-      {
-        options: [
-          { label: "male", value: "male" },
-          { label: "female", value: "female" },
-          { label: "other", value: "other" }
-        ]
-      }
-    ))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "birthday", label: "Birthday" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.DatePicker, null))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Form.Field,
-      {
-        name: ["address", 0, "one"],
-        label: "Address",
-        initialValue: "zzz"
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_yee_c.TextArea, null)
-    ))),
-    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit", "data-testid": "submit-btn" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { htmlType: "reset", "data-testid": "reset-btn" }, "Reset"))
-  );
+          message: "Username must be at least 5 characters long"
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your username" })
+  )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Form.Field,
+    {
+      name: "password",
+      label: "Password",
+      rules: [
+        { required: true, message: "Please input your password!" },
+        {
+          minLength: 10,
+          validateTrigger: "onBlur",
+          message: "Password length must be longer than 10"
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input.Password, { placeholder: "Please input your password" })
+  )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "gender", label: "Gender", initialValue: "male" }, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Select,
+    {
+      options: [
+        { label: "male", value: "male" },
+        { label: "female", value: "female" },
+        { label: "other", value: "other" }
+      ]
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "birthday", label: "Birthday" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.DatePicker, null))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Form.Field,
+    {
+      name: ["address", 0, "one"],
+      label: "Address",
+      initialValue: "zzz"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_yee_c.TextArea, null)
+  ))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit", "data-testid": "submit-btn" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { htmlType: "reset", "data-testid": "reset-btn" }, "Reset")));
 };

package/dist/cjs/Form/demo/form-table.js

@@ -39,73 +39,74 @@ var form_table_default = () => {
   const onFinish = (values) => {
     console.log("Form Values:", values);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react.default.createElement("h2", null, "Form + Table Dynamic Form Example"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, onFinish, layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
-    import_yee_c.Form.List,
-    {
-      name: "users"
-    },
-    (fields, operations) => {
-      const columns = [
-        {
-          title: "Name",
-          dataIndex: "name",
-          key: "name",
-          width: "30%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "name"], required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter name" }))
-        },
-        {
-          title: "Age",
-          dataIndex: "age",
-          key: "age",
-          width: "20%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "age"], required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter age", type: "number" }))
-        },
-        {
-          title: "Address",
-          dataIndex: "address",
-          key: "address",
-          width: "40%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "address"] }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter address" }))
-        },
-        {
-          title: "Action",
-          key: "action",
-          width: "10%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(
-            import_yee_c.Button,
-            {
-              type: "link",
-              color: "danger",
-              onClick: () => operations.remove(index)
-            },
-            "Delete"
-          )
-        }
-      ];
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_yee_c.Table,
-        {
-          columns,
-          dataSource: fields,
-          rowKey: "key",
-          pagination: false,
-          footer: () => /* @__PURE__ */ import_react.default.createElement(
-            import_yee_c.Button,
-            {
-              type: "dashed",
-              onClick: () => operations.add({
-                name: "",
-                age: "",
-                address: ""
-              }),
-              block: true
-            },
-            "+ Add Row"
-          )
-        }
-      );
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: "24px" } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react.default.createElement("h2", null, "Form + Table Dynamic Form Example"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, onFinish, layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.List, { name: "users" }, (fields, operations) => {
+    const columns = [
+      {
+        title: "Name",
+        dataIndex: "name",
+        key: "name",
+        width: "30%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "name"], required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter name" }))
+      },
+      {
+        title: "Age",
+        dataIndex: "age",
+        key: "age",
+        width: "20%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "age"], required: true }, /* @__PURE__ */ import_react.default.createElement(
+          import_yee_c.InputNumber,
+          {
+            controls: false,
+            placeholder: "Please enter age",
+            type: "number"
+          }
+        ))
+      },
+      {
+        title: "Address",
+        dataIndex: "address",
+        key: "address",
+        width: "40%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "address"] }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.TextArea, { placeholder: "Please enter address" }))
+      },
+      {
+        title: "Action",
+        key: "action",
+        width: "10%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(
+          import_yee_c.Button,
+          {
+            type: "link",
+            color: "danger",
+            onClick: () => operations.remove(index)
+          },
+          "Delete"
+        )
+      }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_yee_c.Table,
+      {
+        columns,
+        dataSource: fields,
+        rowKey: "key",
+        pagination: false,
+        footer: () => /* @__PURE__ */ import_react.default.createElement(
+          import_yee_c.Button,
+          {
+            type: "dashed",
+            onClick: () => operations.add({
+              name: "",
+              age: "",
+              address: ""
+            }),
+            block: true
+          },
+          "+ Add Row"
+        )
+      }
+    );
+  }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: "24px" } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(
     import_yee_c.Button,
     {
       style: { marginLeft: "8px" },

package/dist/cjs/Menu/style/index.less

@@ -30,6 +30,7 @@
   // -------- item --------
   &-item {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     box-sizing: border-box;
     width: 100%;
@@ -119,6 +120,7 @@
     &-title {
       display: flex;
       align-items: center;
+      flex-shrink: 0;
       justify-content: space-between;
       padding: var(--yee-menu-item-padding);
       border-radius: var(--yee-menu-item-border-radius);

package/dist/cjs/Segmented/demo/variant.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/cjs/Segmented/demo/variant.js

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Segmented/demo/variant.tsx
+var variant_exports = {};
+__export(variant_exports, {
+  default: () => variant_default
+});
+module.exports = __toCommonJS(variant_exports);
+var import_yee_c = require("../..");
+var import_lucide_react = require("lucide-react");
+var import_react = __toESM(require("react"));
+var variant_default = () => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Segmented, { options: ["Daily", "Weekly", "Monthly"] }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Segmented, { variant: "pill", options: ["Daily", "Weekly", "Monthly"] })), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Segmented, { variant: "pill", size: "small", options: ["Small", "Default", "Large"] }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Segmented, { variant: "pill", size: "large", options: ["Small", "Default", "Large"] })), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 480 } }, /* @__PURE__ */ import_react.default.createElement(
+  import_yee_c.Segmented,
+  {
+    variant: "pill",
+    block: true,
+    defaultValue: "list",
+    options: [
+      { label: "List", value: "list", icon: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.List, { size: 16 }) },
+      { label: "Grid", value: "grid", icon: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.LayoutGrid, { size: 16 }) },
+      { label: "Detail", value: "detail" }
+    ]
+  }
+)));

package/dist/cjs/Segmented/interface.d.ts

@@ -71,6 +71,11 @@ export interface SegmentedProps extends DataAttributeProps {
      * Size
      */
     size?: 'small' | 'default' | 'large';
+    /**
+     * Visual style variant. `pill` renders the selected item as a colored capsule with no container background
+     * @default default
+     */
+    variant?: 'default' | 'pill';
     /**
      * Whether to fill the container width, options share the space equally
      */

package/dist/cjs/Segmented/segmented.js

@@ -91,6 +91,7 @@ var Segmented = import_react.default.forwardRef(
       defaultValue,
       disabled,
       size,
+      variant = "default",
       block,
       name = uid,
       onChange
@@ -105,6 +106,7 @@ var Segmented = import_react.default.forwardRef(
       "defaultValue",
       "disabled",
       "size",
+      "variant",
       "block",
       "name",
       "onChange"
@@ -122,6 +124,7 @@ var Segmented = import_react.default.forwardRef(
       prefixCls,
       {
         [`${prefixCls}-${size}`]: size,
+        [`${prefixCls}-${variant}`]: variant && variant !== "default",
         [`${prefixCls}-block`]: block,
         [`${prefixCls}-disabled`]: disabled
       },

package/dist/cjs/Segmented/style/index.less

@@ -88,6 +88,30 @@
     box-shadow: 0 0 0 2px var(--yee-primary-color);
   }
 
+  // 变体：胶囊风格，选中项以主色胶囊高亮，容器无底色
+  &-pill {
+    padding: 0;
+    background-color: transparent;
+    gap: var(--yee-segmented-item-gap);
+
+    @{pls}-item {
+      border-radius: 999px;
+    }
+
+    @{pls}-item-selected {
+      color: var(--yee-segmented-pill-color, #fff);
+    }
+
+    @{pls}-thumb {
+      border-radius: 999px;
+      background-color: var(
+        --yee-segmented-pill-bg-color,
+        var(--yee-primary-color)
+      );
+      box-shadow: none;
+    }
+  }
+
   &-small {
     @{pls}-item {
       padding: var(--yee-segmented-item-small-padding);

package/dist/cjs/Tag/demo/variant.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/cjs/Tag/demo/variant.js

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Tag/demo/variant.tsx
+var variant_exports = {};
+__export(variant_exports, {
+  default: () => variant_default
+});
+module.exports = __toCommonJS(variant_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var variant_default = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "filled" }, "Filled"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "solid" }, "Solid"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "outlined" }, "Outlined")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "filled", status: "success" }, "Success"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "solid", status: "success" }, "Success"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "outlined", status: "success" }, "Success")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "filled", status: "warning" }, "Warning"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "solid", status: "warning" }, "Warning"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "outlined", status: "warning" }, "Warning")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "filled", status: "error" }, "Error"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "solid", status: "error" }, "Error"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "outlined", status: "error" }, "Error")));
+};

package/dist/cjs/Tag/interface.d.ts

@@ -51,6 +51,11 @@ export interface TagProps extends DataAttributeProps {
      * Whether checkable
      */
     checkable?: boolean;
+    /**
+     * tag variant
+     * @default filled
+     * */
+    variant?: 'filled' | 'solid' | 'outlined';
     /**
      * Set checked state
      */

package/dist/cjs/Tag/style/index.less

@@ -8,45 +8,128 @@
   white-space: nowrap;
   height: var(--yee-tag-height);
   padding: var(--yee-tag-padding);
-  color: var(--yee-tag-color);
   font-size: var(--yee-tag-font-size);
   line-height: var(--yee-tag-line-height);
-  background-color: var(--yee-tag-item-bg-color);
   background-clip: padding-box;
   border: var(--yee-tag-border-width) solid var(--yee-tag-border-color);
   border-radius: var(--yee-tag-border-radius);
 
-  &-info {
-    color: var(--yee-tag-info-color);
-    background-color: var(--yee-tag-info-bg-color);
-    border-color: var(--yee-tag-info-border-color);
-  }
+  // ============ 变体 variant ============
+  // filled：浅色底 + 彩色字（默认）
+  &-filled {
+    color: var(--yee-tag-color);
+    background-color: var(--yee-tag-item-bg-color);
+    border-color: var(--yee-tag-border-color);
 
-  &-success {
-    color: var(--yee-tag-success-color);
-    background-color: var(--yee-tag-success-bg-color);
-    border-color: var(--yee-tag-success-border-color);
-  }
+    &@{pls}-info {
+      color: var(--yee-tag-info-color);
+      background-color: var(--yee-tag-info-bg-color);
+      border-color: var(--yee-tag-info-border-color);
+    }
+
+    &@{pls}-success {
+      color: var(--yee-tag-success-color);
+      background-color: var(--yee-tag-success-bg-color);
+      border-color: var(--yee-tag-success-border-color);
+    }
+
+    &@{pls}-warning {
+      color: var(--yee-tag-warning-color);
+      background-color: var(--yee-tag-warning-bg-color);
+      border-color: var(--yee-tag-warning-border-color);
+    }
 
-  &-warning {
-    color: var(--yee-tag-warning-color);
-    background-color: var(--yee-tag-warning-bg-color);
-    border-color: var(--yee-tag-warning-border-color);
+    &@{pls}-error {
+      color: var(--yee-tag-error-color);
+      background-color: var(--yee-tag-error-bg-color);
+      border-color: var(--yee-tag-error-border-color);
+    }
+
+    &@{pls}-disabled {
+      color: var(--yee-tag-disabled-color);
+      background-color: var(--yee-tag-disabled-bg-color);
+      border-color: var(--yee-tag-disabled-border-color);
+      cursor: not-allowed;
+    }
   }
 
-  &-error {
-    color: var(--yee-tag-error-color);
-    background-color: var(--yee-tag-error-bg-color);
-    border-color: var(--yee-tag-error-border-color);
+  // solid：纯色底 + 白字
+  &-solid {
+    color: var(--yee-tag-solid-color, #fff);
+    background-color: var(--yee-tag-color);
+    border-color: transparent;
+
+    &@{pls}-info {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-info-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-success {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-success-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-warning {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-warning-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-error {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-error-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-disabled {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-disabled-color);
+      border-color: transparent;
+      cursor: not-allowed;
+    }
   }
 
-  &-disabled {
-    color: var(--yee-tag-disabled-color);
-    background-color: var(--yee-tag-disabled-bg-color);
-    border-color: var(--yee-tag-disabled-border-color);
-    cursor: not-allowed;
+  // outlined：透明底 + 彩色字 + 彩色描边
+  &-outlined {
+    color: var(--yee-tag-color);
+    background-color: transparent;
+    border-color: var(--yee-tag-border-color);
+
+    &@{pls}-info {
+      color: var(--yee-tag-info-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-info-color);
+    }
+
+    &@{pls}-success {
+      color: var(--yee-tag-success-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-success-color);
+    }
+
+    &@{pls}-warning {
+      color: var(--yee-tag-warning-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-warning-color);
+    }
+
+    &@{pls}-error {
+      color: var(--yee-tag-error-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-error-color);
+    }
+
+    &@{pls}-disabled {
+      color: var(--yee-tag-disabled-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-disabled-color);
+      cursor: not-allowed;
+    }
   }
 
+  // ============ 其他修饰 ============
   &-dashed {
     background-color: var(--yee-tag-item-dashed-bg-color);
     border-style: dashed;