From 0397897ca9b66a70f969d4b16aa24301bd3b8878 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Tue, 22 Jul 2025 15:54:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8F=90=E7=A4=BA=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E3=80=81=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/src/App.vue                 | 1470 +++++++++++++++++-----------------
 packages/GuipFormItem/index.js       |    7 +
 packages/GuipFormItem/src/index.vue  |   52 ++
 packages/GuipMessage/GuipMessage.vue |  170 ++++
 packages/GuipMessage/index.js        |   94 +++
 packages/assets/dropDown_expand.png  |  Bin 673 -> 297 bytes
 packages/assets/message_Success.png  |  Bin 0 -> 802 bytes
 packages/assets/message_Warning.png  |  Bin 0 -> 654 bytes
 packages/assets/message_error.png    |  Bin 0 -> 746 bytes
 packages/index.js                    |   41 +-
 packages/styles/component.scss       |   85 +-
 packages/utils/clipboard.js          |   77 ++
 packages/utils/common.js             |   32 +
 packages/utils/dirClipBoard.js       |   19 +
 packages/utils/eventBus.js           |   11 +
 packages/utils/headerIcon.js         |   17 +
 packages/utils/request.js            |   93 +++
 17 files changed, 1450 insertions(+), 718 deletions(-)
 create mode 100644 packages/GuipFormItem/index.js
 create mode 100644 packages/GuipFormItem/src/index.vue
 create mode 100644 packages/GuipMessage/GuipMessage.vue
 create mode 100644 packages/GuipMessage/index.js
 create mode 100644 packages/assets/message_Success.png
 create mode 100644 packages/assets/message_Warning.png
 create mode 100644 packages/assets/message_error.png
 create mode 100644 packages/utils/clipboard.js
 create mode 100644 packages/utils/common.js
 create mode 100644 packages/utils/dirClipBoard.js
 create mode 100644 packages/utils/eventBus.js
 create mode 100644 packages/utils/headerIcon.js
 create mode 100644 packages/utils/request.js

diff --git a/examples/src/App.vue b/examples/src/App.vue
index 375e998..6230560 100644
--- a/examples/src/App.vue
+++ b/examples/src/App.vue
@@ -105,6 +105,35 @@
         </div>
       </section>
       <section class="demo-section">
+        <h2>提示框：</h2>
+        <div class="ele-item">
+            <GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton>
+            <GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton>
+            <GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton>
+        </div>
+      </section>
+
+      <section class="demo-section">
+        <h2>复制功能</h2>
+        <div class="ele-item">
+            <label for="">copy固定内容</label>
+            <!-- 复制固定文本 -->
+            <GuipButton size="big" v-clipboard="'渝过田晴'">复制渝过田晴</GuipButton>
+            
+            <!-- 复制动态文本 -->
+            <GuipButton size="big" v-clipboard="content">点击复制: {{ content }}</GuipButton>
+        </div>
+        <div class="ele-item">
+            <label for="">手动点击copy</label>
+            <GuipInput v-model="form.input1">
+                <!-- 提示可以不添加 、图标可更换 -->
+                <GuipToolTip content="点击复制到粘贴板"  slot="suffix">
+                    <img src="../assets/home-bread.svg" @click="handleClickCopy" />
+                </GuipToolTip>
+            </GuipInput>
+        </div>
+      </section>
+      <section class="demo-section">
         <h2>实时预览tab组件</h2>
         <DevicePreview>
           <template #desktop>
@@ -153,7 +182,18 @@
           <GuipSelect width="600px" v-model="form.card" clearable label="卡片" :default-value="form.card"
             @change="selectChangeTest" prop="card" :options="options" valueKey="id1" labelKey="id2"
             :extraItem="{ label: '全部', value: '99999' }" />
-        </div>
+          </div>
+        </section>
+        
+        <section class="demo-section">
+          <h2>自定义表单展示形式：</h2>
+          <!-- 必须添加 slot -->
+          <div style="width: 400px;">
+            <GuipFormItem column="column" class="mb24" label="自定义左侧">
+              <span class="desc" slot="formRight"><a href="https://www.baidu.com/">跳转一下</a> 自定义右侧</span>
+              <GuipInput slot="formDom" ref="GuipInput" v-model="form.input1" width="100%" placeholder="这是自定义默认提示语" />
+            </GuipFormItem>
+          </div>
       </section>
 
       <section class="demo-section">
@@ -307,660 +347,660 @@
 <script>
 export default {
   data() {
-        return {
-            content:'测试一下',
-            domainOptions: [
-                {
-                    value: '.chachongz.com',
-                    label: '111.chachongz.com',
-                    id: '11',
-                    name: '测试一下自定义名称111'
-                },
-                {
-                    value: '.turnitin.org.cn',
-                    label: '222.turnitin.org.cn',
-                    id: '22',
-                    name: '测试一下自定义名称222'
-                },
-                {
-                    value: '.jishu.chachongz.com',
-                    label: '333.jishu.chachongz.com',
-                    id: '33',
-                    name: '测试一下自定义名称333'
-                },
-            ],
-            tableData3: [{
-                id: '12987122',
-                name: '王小虎',
-                amount1: '234',
-                amount2: '3.2',
-                amount3: 10
-            }, {
-                id: '12987123',
-                name: '王小虎',
-                amount1: '165',
-                amount2: '4.43',
-                amount3: 12
-            }, {
-                id: '12987124',
-                name: '王小虎',
-                amount1: '324',
-                amount2: '1.9',
-                amount3: 9
-            }, {
-                id: '12987125',
-                name: '王小虎',
-                amount1: '621',
-                amount2: '2.2',
-                amount3: 17
-            }, {
-                id: '12987126',
-                name: '王小虎',
-                amount1: '539',
-                amount2: '4.1',
-                amount3: 15
-            }],
-            tableWidth: 0,
-            currentPage: 1,    //当前页
-            pageSize: 5,   //每页的容量
-            total: 0,   //列表总数
-            tableLoading: false,
-            timer: null,
-            date1: '',
-            switchValue: true,
-            switchValue3: true,
-            switchValue1: 1,
-            switchValue2: '0',
-            dialogVisible1: false,
-            dialogVisible2: false,
-            dialogVisible: false,//是否展示弹框
-            showCancelButton: true, // 控制是否显示取消按钮
-            showCloseButton: true, // 控制是否显示关闭按钮
-            form: {
-                username: '',
-                language: '',
-                switchValue3:true,
-                switchValue2: '0',
-                domain_set: '',
-                domainSuffix: '11',
-                domainSuffix1: '.chachongz.com',
-                card: '1',
-                card1: '20',
-                input1: '跨年的烟火,绽放天空',
-                input2: '',
-                input3: '',
-            },
-            languageOptions1: [
-                { label: 'JavaScript', value: 'js', selectedLabel: '333提拉米苏33', id: '1', name: '麻辣烫' },
-                { label: 'Python', value: 'py', selectedLabel: '柠檬茶', id: '10', name: '易烊千玺' },
-                { label: 'Java', value: 'java', disabled: true, selectedLabel: '榴莲大福', id: '11', name: '王源' }, // 禁用选项
-                { label: 'Go', value: 'go', selectedLabel: '444222麻辣烫', id: '12', name: '王俊凯' },
-            ],
-            languageOptions: {
-                '20': '查重站',
-                '31': 'AI站'
-            },
-            rules: {
-                username: [
-                    { required: true, message: '请输入用户名', trigger: 'blur' }
-                ],
-                card: [
-                    { required: true, message: '请选择有效信息', trigger: 'blur' }
-                ],
-                language: [
-                    { required: true, message: '请选择语言', trigger: 'blur' },
-                ],
-                phone: [
-                    { required: true, message: '请输入手机号', trigger: 'blur' }
-                ],
-                age: [
-                    { required: true, message: '请输入年龄', trigger: 'blur' }
-                ]
-            },
-            usernameRules: [{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules
-            msg: "测试",
-            title: "相关附件",
-            edit: false,
-            action: true,
-            header: false,
-            width: 1920,
-            height: 1080,
-            dataList: [
-                { name: "张三", age: 19, id: 1 },
-                { name: "李四", age: 20, id: 2 },
-            ],
-            formList: [],
-            // 模拟数据 详细 测试
-            fromItem: {
-                id: "Shanghai",
-                id1: "选项4",
-                name: "用户名",
-                radioId: "2",
-                checkboxId: ["上海", "北京"],
-                textareaIner: "textarea",
-                dateTime: "2023-09-12 00:00:00",
-                uploadList: [
-                    {
-                        name: "小梨猫.jpg",
-                        size: 160517,
-                        uid: 1695291434025,
-                        url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
-                    },
-                ],
-            },
-            // 表格数据
-            tableData2: [{
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄',
-                price: '20',
-                age: 20,
-                statu:1,
-                // 在支持修改的项目中，需要主动保留一份原始数据
-                edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-02',
-                name: '王小虎11',
-                address: '上海市普陀区金沙江路 151811 弄',
-                price: '10',
-                age: 30,
-                statu:1,
-
-                edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
+    return {
+      content: '测试一下',
+      domainOptions: [
+        {
+          value: '.chachongz.com',
+          label: '111.chachongz.com',
+          id: '11',
+          name: '测试一下自定义名称111'
+        },
+        {
+          value: '.turnitin.org.cn',
+          label: '222.turnitin.org.cn',
+          id: '22',
+          name: '测试一下自定义名称222'
+        },
+        {
+          value: '.jishu.chachongz.com',
+          label: '333.jishu.chachongz.com',
+          id: '33',
+          name: '测试一下自定义名称333'
+        },
+      ],
+      tableData3: [{
+        id: '12987122',
+        name: '王小虎',
+        amount1: '234',
+        amount2: '3.2',
+        amount3: 10
+      }, {
+        id: '12987123',
+        name: '王小虎',
+        amount1: '165',
+        amount2: '4.43',
+        amount3: 12
+      }, {
+        id: '12987124',
+        name: '王小虎',
+        amount1: '324',
+        amount2: '1.9',
+        amount3: 9
+      }, {
+        id: '12987125',
+        name: '王小虎',
+        amount1: '621',
+        amount2: '2.2',
+        amount3: 17
+      }, {
+        id: '12987126',
+        name: '王小虎',
+        amount1: '539',
+        amount2: '4.1',
+        amount3: 15
+      }],
+      tableWidth: 0,
+      currentPage: 1,    //当前页
+      pageSize: 5,   //每页的容量
+      total: 0,   //列表总数
+      tableLoading: false,
+      timer: null,
+      date1: '',
+      switchValue: true,
+      switchValue3: true,
+      switchValue1: 1,
+      switchValue2: '0',
+      dialogVisible1: false,
+      dialogVisible2: false,
+      dialogVisible: false,//是否展示弹框
+      showCancelButton: true, // 控制是否显示取消按钮
+      showCloseButton: true, // 控制是否显示关闭按钮
+      form: {
+        username: '',
+        language: '',
+        switchValue3: true,
+        switchValue2: '0',
+        domain_set: '',
+        domainSuffix: '11',
+        domainSuffix1: '.chachongz.com',
+        card: '1',
+        card1: '20',
+        input1: '跨年的烟火,绽放天空',
+        input2: '',
+        input3: '',
+      },
+      languageOptions1: [
+        { label: 'JavaScript', value: 'js', selectedLabel: '333提拉米苏33', id: '1', name: '麻辣烫' },
+        { label: 'Python', value: 'py', selectedLabel: '柠檬茶', id: '10', name: '易烊千玺' },
+        { label: 'Java', value: 'java', disabled: true, selectedLabel: '榴莲大福', id: '11', name: '王源' }, // 禁用选项
+        { label: 'Go', value: 'go', selectedLabel: '444222麻辣烫', id: '12', name: '王俊凯' },
+      ],
+      languageOptions: {
+        '20': '查重站',
+        '31': 'AI站'
+      },
+      rules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' }
+        ],
+        card: [
+          { required: true, message: '请选择有效信息', trigger: 'blur' }
+        ],
+        language: [
+          { required: true, message: '请选择语言', trigger: 'blur' },
+        ],
+        phone: [
+          { required: true, message: '请输入手机号', trigger: 'blur' }
+        ],
+        age: [
+          { required: true, message: '请输入年龄', trigger: 'blur' }
+        ]
+      },
+      usernameRules: [{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules
+      msg: "测试",
+      title: "相关附件",
+      edit: false,
+      action: true,
+      header: false,
+      width: 1920,
+      height: 1080,
+      dataList: [
+        { name: "张三", age: 19, id: 1 },
+        { name: "李四", age: 20, id: 2 },
+      ],
+      formList: [],
+      // 模拟数据 详细 测试
+      fromItem: {
+        id: "Shanghai",
+        id1: "选项4",
+        name: "用户名",
+        radioId: "2",
+        checkboxId: ["上海", "北京"],
+        textareaIner: "textarea",
+        dateTime: "2023-09-12 00:00:00",
+        uploadList: [
+          {
+            name: "小梨猫.jpg",
+            size: 160517,
+            uid: 1695291434025,
+            url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
+          },
+        ],
+      },
+      // 表格数据
+      tableData2: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+        price: '20',
+        age: 20,
+        statu: 1,
+        // 在支持修改的项目中，需要主动保留一份原始数据
+        edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-02',
+        name: '王小虎11',
+        address: '上海市普陀区金沙江路 151811 弄',
+        price: '10',
+        age: 30,
+        statu: 1,
 
-            }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄',
-                price: '200',
-                statu:0,
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-08',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-06',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-07',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }],
-            tableData4: [{
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄',
-                price: '20',
-                age: 20,
-                // 在支持修改的项目中，需要主动保留一份原始数据
-                edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-02',
-                name: '王小虎11',
-                address: '上海市普陀区金沙江路 151811 弄',
-                price: '10',
-                age: 30,
-                edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
+        edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
 
-            }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄',
-                price: '200',
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-08',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-06',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-07',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }],
-            // 表格列配置
-            columns: [
-                { prop: 'name', label: '姓名（带气泡）', popover: true }, // 支持气泡框
-                { prop: 'age', label: '年龄', popover: true }, // 不支持气泡框
-                { prop: 'address', label: '地址（带气泡）', popover: true }, // 支持气泡框
-            ],
-            optionss: [
-                {
-                    value: "选项1",
-                    label: "黄金糕",
-                },
-                {
-                    value: "选项2",
-                    label: "双皮奶",
-                },
-                {
-                    value: "选项3",
-                    label: "蚵仔煎",
-                },
-                {
-                    value: "选项4",
-                    label: "龙须面",
-                },
-                {
-                    value: "选项5",
-                    label: "北京烤鸭",
-                },
-            ],
-            cities: [
-                {
-                    value: "Beijing",
-                    label: "北京",
-                },
-                {
-                    value: "Shanghai",
-                    label: "上海",
-                },
-                {
-                    value: "Nanjing",
-                    label: "南京",
-                },
-                {
-                    value: "Chengdu",
-                    label: "成都",
-                },
-                {
-                    value: "Shenzhen",
-                    label: "深圳",
-                },
-                {
-                    value: "Guangzhou",
-                    label: "广州",
-                }
-            ],
-            tableData: [],
-            input: 'hahhahah',
-            defaultValue: 'asdasda',
-            radio: 3,
-            radio1: 5,
-            btnstyleObj: {
-                width: '388px',
-                height: '46px',
-                borderRadius: '4px',
-                background: '#006AFF',
-            },
-            btnstyleObj1: {
-                width: '247px',
-                height: '46px',
-                borderRadius: '4px',
-            },
-            styleObject: {
-                minWidth: '200px',
-                maxWidth: '400px',
-                // height: '40px'
-            },
-            styleObject1: {
-                width: '600px',
-                height: '50px'
-            },
-            plain: false,
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+        price: '200',
+        statu: 0,
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }],
+      tableData4: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+        price: '20',
+        age: 20,
+        // 在支持修改的项目中，需要主动保留一份原始数据
+        edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-02',
+        name: '王小虎11',
+        address: '上海市普陀区金沙江路 151811 弄',
+        price: '10',
+        age: 30,
+        edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
 
-            options: [{
-                value: '选项1',
-                label1: '黄金hhhhhh',
-                id1: '1',
-                id2: '1是打开快递吧',
-                label: '黄金糕'
-            }, {
-                value: '选项2',
-                id1: '12',
-                id2: '啊22哈哈',
-                label1: '双皮奶hhhhhhhhh',
-                label: '双皮奶'
-            }, {
-                value: '选项3',
-                id1: '13',
-                id2: '啊33哈哈',
-                label1: '蚵仔煎hhhhhhhhh',
-                label: '蚵仔煎'
-            }, {
-                value: '选项4',
-                id1: '14',
-                id2: '啊444哈哈',
-                label1: '双皮奶hhhhhhhhh',
-                label: '龙须面'
-            }, {
-                value: '选项5',
-                id1: '155',
-                id2: '啊55哈哈',
-                label1: '双皮奶hhhhhhhhh',
-                label: '北京烤鸭'
-            }],
-        }
-    },
-    mounted() {
-        // this.getList();
-        // this.getStagePurchase()
-        // this.$loadingFn.show()
-        // setInterval(()=>{
-        //     this.$loadingFn.hide()
-        // },70000)
-        // this.timer = setTimeout(() => {
-        //     this.$store.dispatch('hideLoading')
-        // }, 2000)
-        // this.timer = null;
-
-    },
-    computed: {
-        currentDomainItem() {
-            return this.findItemById('id', 'domainSuffix');
-        }
-    },
-    methods: {
-        switchChange(value){
-            console.log(value,'====value');
-            console.log(this.switchValue1,'===uuuu');
-        },
-        handleEvent(data){
-            console.log(data,'data')
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+        price: '200',
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }],
+      // 表格列配置
+      columns: [
+        { prop: 'name', label: '姓名（带气泡）', popover: true }, // 支持气泡框
+        { prop: 'age', label: '年龄', popover: true }, // 不支持气泡框
+        { prop: 'address', label: '地址（带气泡）', popover: true }, // 支持气泡框
+      ],
+      optionss: [
+        {
+          value: "选项1",
+          label: "黄金糕",
         },
-        handleOptions(options){
-            console.log(options,'options')
+        {
+          value: "选项2",
+          label: "双皮奶",
         },
-        // 手动copy内容
-        handleClickCopy(){
-            this.$copy(this.form.input1, {
-                successMsg: '内容已复制到剪贴板',
-                errorMsg: '复制失败，请按Ctrl+C手动复制',
-                vm: this
-            });
+        {
+          value: "选项3",
+          label: "蚵仔煎",
         },
-        // 自定义的radio label 展示内容
-        formatLabel(option) {
-            return `${option.name} (ID: ${option.id})`;
+        {
+          value: "选项4",
+          label: "龙须面",
         },
-        findItemById(valueKey, key) {
-            // 自动查找选中项 
-            return this.domainOptions.find(item => item[valueKey] === this.form[key]);
+        {
+          value: "选项5",
+          label: "北京烤鸭",
         },
-        toggleDrop1(e) {
-            this.$refs.dropDomain1.toggleDropdown(e)
+      ],
+      cities: [
+        {
+          value: "Beijing",
+          label: "北京",
         },
-        toggleDrop(e) {
-            this.$refs.dropDomain.toggleDropdown(e)
+        {
+          value: "Shanghai",
+          label: "上海",
         },
-        changeInputtest(e) {
-            console.log(e, '---000changeInputtest');
+        {
+          value: "Nanjing",
+          label: "南京",
         },
-        changeSelectIp(item) {
-            // 选中项
-            // this.selectedItem1 = { ...item };
-            console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-');
+        {
+          value: "Chengdu",
+          label: "成都",
         },
-        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
-            console.log(row, column);
-            if (rowIndex % 2 === 0) {
-                if (columnIndex === 0) {
-                    return [1, 2];
-                } else if (columnIndex === 1) {
-                    return [0, 0];
-                }
-            }
+        {
+          value: "Shenzhen",
+          label: "深圳",
         },
+        {
+          value: "Guangzhou",
+          label: "广州",
+        }
+      ],
+      tableData: [],
+      input: 'hahhahah',
+      defaultValue: 'asdasda',
+      radio: 3,
+      radio1: 5,
+      btnstyleObj: {
+        width: '388px',
+        height: '46px',
+        borderRadius: '4px',
+        background: '#006AFF',
+      },
+      btnstyleObj1: {
+        width: '247px',
+        height: '46px',
+        borderRadius: '4px',
+      },
+      styleObject: {
+        minWidth: '200px',
+        maxWidth: '400px',
+        // height: '40px'
+      },
+      styleObject1: {
+        width: '600px',
+        height: '50px'
+      },
+      plain: false,
 
-        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-            console.log(row, column);
+      options: [{
+        value: '选项1',
+        label1: '黄金hhhhhh',
+        id1: '1',
+        id2: '1是打开快递吧',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        id1: '12',
+        id2: '啊22哈哈',
+        label1: '双皮奶hhhhhhhhh',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        id1: '13',
+        id2: '啊33哈哈',
+        label1: '蚵仔煎hhhhhhhhh',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        id1: '14',
+        id2: '啊444哈哈',
+        label1: '双皮奶hhhhhhhhh',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        id1: '155',
+        id2: '啊55哈哈',
+        label1: '双皮奶hhhhhhhhh',
+        label: '北京烤鸭'
+      }],
+    }
+  },
+  mounted() {
+    // this.getList();
+    // this.getStagePurchase()
+    // this.$loadingFn.show()
+    // setInterval(()=>{
+    //     this.$loadingFn.hide()
+    // },70000)
+    // this.timer = setTimeout(() => {
+    //     this.$store.dispatch('hideLoading')
+    // }, 2000)
+    // this.timer = null;
 
-            if (columnIndex === 0) {
-                if (rowIndex % 2 === 0) {
-                    return {
-                        rowspan: 2,
-                        colspan: 1
-                    };
-                } else {
-                    return {
-                        rowspan: 0,
-                        colspan: 0
-                    };
-                }
-            }
-        },
-        openMessage(type) {
-            console.log(type);
-            // 单独指定方法调用
-            switch (type) {
-                case 'success':
-                    this.$Message.success('成功，文案自定义')
-                    break;
-                case 'error':
-                    this.$Message.error('失败，文案自定义')
-                    break;
-                case 'info':
-                    this.$Message.info('提示，文案自定义')
-                    break;
-            }
-            // 自定义选项
-            // this.$Message({
-            //   type: 'success',
-            //   title: '成功标题',
-            //   message: '这是一条成功的提示消息',
-            //   duration: 5000,
-            //   showClose: true,
-            //   center: true
-            // })
-        },
-        showTooltip() {
-            this.$refs.tooltip.show()
-        },
-        hideTooltip() {
-            this.$refs.tooltip.hide()
-        },
-        handleSizeChange(val) {
-            this.pageSize = val
-            this.getStagePurchase()
-        },
-        handleCurrentChange(val) {
-            this.currentPage = val
-            this.getStagePurchase()
-        },
-        getStagePurchase() {
-            this.tableLoading = true
-            const that = this
-            that.tableData = []
-            this.$http('POST', '/supernew/ajax_get_stage_purchase', {
-                type: 0,
-                cur_page: 1,
-                page_size: 5,
-            }, {
-                headers: {
-                    'AUTH': '3c901fa4a19a7ad9d01238890863d499'
-                }
-            }).then(response => {
-                this.tableLoading = false
-                this.$nextTick(() => {
-                    that.tableData = response.data.list
-                    // console.log(that.tableData,'---that.tableData');
-                    // that.type2name = response.data.type2name
-                    that.total = response.data.total
-                })
-            }).catch(error => {
-                console.error(error, 'error')
-            })
-        },
-        btnClick() {
+  },
+  computed: {
+    currentDomainItem() {
+      return this.findItemById('id', 'domainSuffix');
+    }
+  },
+  methods: {
+    switchChange(value) {
+      console.log(value, '====value');
+      console.log(this.switchValue1, '===uuuu');
+    },
+    handleEvent(data) {
+      console.log(data, 'data')
+    },
+    handleOptions(options) {
+      console.log(options, 'options')
+    },
+    // 手动copy内容
+    handleClickCopy() {
+      this.$copy(this.form.input1, {
+        successMsg: '内容已复制到剪贴板',
+        errorMsg: '复制失败，请按Ctrl+C手动复制',
+        vm: this
+      });
+    },
+    // 自定义的radio label 展示内容
+    formatLabel(option) {
+      return `${option.name} (ID: ${option.id})`;
+    },
+    findItemById(valueKey, key) {
+      // 自动查找选中项 
+      return this.domainOptions.find(item => item[valueKey] === this.form[key]);
+    },
+    toggleDrop1(e) {
+      this.$refs.dropDomain1.toggleDropdown(e)
+    },
+    toggleDrop(e) {
+      this.$refs.dropDomain.toggleDropdown(e)
+    },
+    changeInputtest(e) {
+      console.log(e, '---000changeInputtest');
+    },
+    changeSelectIp(item) {
+      // 选中项
+      // this.selectedItem1 = { ...item };
+      console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-');
+    },
+    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+      console.log(row, column);
+      if (rowIndex % 2 === 0) {
+        if (columnIndex === 0) {
+          return [1, 2];
+        } else if (columnIndex === 1) {
+          return [0, 0];
+        }
+      }
+    },
 
-        },
-        openLoading() {
-            this.$store.dispatch('showLoading')
-            setTimeout(() => {
-                this.$store.dispatch('hideLoading')
-            }, 2000)
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      console.log(row, column);
 
-        },
-        handleFilter(column) {
-            // 在这里处理筛选逻辑
-            console.log('筛选列:', column);
-        },
-        // 部分情况可能导致页面不更新，增加 key 强制重新渲染
-        random() {
-            var randomNumber = Math.random();
-            return randomNumber
-        },
-        onSwitchChange(value) {
-            console.log('Switch/ 状态变化:',this.switchValue, value);
-            // console.log('Switch 状态变化:',this.form.switchValue2,this.form.switchValue3, value);
-        },
-        onSwitchChange1(value) {
-            // 操作表格内的 看一下是否同步修改了
-            // console.log(this.tableData2,value,'this.tableData2===');
-            console.log('Switch/ 状态变化:', value.statu);
-        },
-        // 弹框相关方法---start
-        openDialog() {
-            console.log(this.switchValue1,'switchValue1');
-            this.dialogVisible = true;
-        },
-        openDialog1() {
-            this.dialogVisible1 = true;
-        },
-        openDialog2() {
-            this.dialogVisible2 = true;
-        },
-        // 确认按钮事件
-        handleConfirm() {
-            this.$message.success('点击了确认按钮');
-            this.dialogVisible = false;
-        },
-        // 取消按钮事件
-        handleCancel() {
-            this.$message.warning('点击了取消按钮');
-            this.dialogVisible = false;
-            this.dialogVisible1 = false;
-            this.dialogVisible2 = false;
-        },
-        // 关闭弹框事件
-        handleClose() {
-            this.$message.info('弹框已关闭');
-            this.dialogVisible = false;
-            this.dialogVisible1 = false;
-            this.dialogVisible2 = false;
-        },
-        dialogVisibleChange(data) {
-            console.log(data, 'data098908090');
-        },
-        // 弹框相关方法---end
+      if (columnIndex === 0) {
+        if (rowIndex % 2 === 0) {
+          return {
+            rowspan: 2,
+            colspan: 1
+          };
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          };
+        }
+      }
+    },
+    openMessage(type) {
+      console.log(type);
+      // 单独指定方法调用
+      switch (type) {
+        case 'success':
+          this.$Message.success('成功，文案自定义')
+          break;
+        case 'error':
+          this.$Message.error('失败，文案自定义')
+          break;
+        case 'info':
+          this.$Message.info('提示，文案自定义')
+          break;
+      }
+      // 自定义选项
+      // this.$Message({
+      //   type: 'success',
+      //   title: '成功标题',
+      //   message: '这是一条成功的提示消息',
+      //   duration: 5000,
+      //   showClose: true,
+      //   center: true
+      // })
+    },
+    showTooltip() {
+      this.$refs.tooltip.show()
+    },
+    hideTooltip() {
+      this.$refs.tooltip.hide()
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.getStagePurchase()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.getStagePurchase()
+    },
+    getStagePurchase() {
+      this.tableLoading = true
+      const that = this
+      that.tableData = []
+      this.$http('POST', '/supernew/ajax_get_stage_purchase', {
+        type: 0,
+        cur_page: 1,
+        page_size: 5,
+      }, {
+        headers: {
+          'AUTH': '3c901fa4a19a7ad9d01238890863d499'
+        }
+      }).then(response => {
+        this.tableLoading = false
+        this.$nextTick(() => {
+          that.tableData = response.data.list
+          // console.log(that.tableData,'---that.tableData');
+          // that.type2name = response.data.type2name
+          that.total = response.data.total
+        })
+      }).catch(error => {
+        console.error(error, 'error')
+      })
+    },
+    btnClick() {
 
-        // 选择表格某一项 点击  
-        handlePriceClick(row) {
-            this.currentRow = row;
-            this.editedPrice = row.price;
-            this.dialogVisible = true;
-        },
+    },
+    openLoading() {
+      this.$store.dispatch('showLoading')
+      setTimeout(() => {
+        this.$store.dispatch('hideLoading')
+      }, 2000)
 
-        // 表格气泡框-----
-        // 确认事件
-        onConfirm(row, prop) {
-            console.log('确认修改:', row, prop);
-            this.$message.success('修改成功');
-            this.$set(this.tableData4, row)
-            console.log(this.tableData4, 'this.tableData=====');
-        },
-        // 取消事件
-        onCancel(row, prop) {
-            console.log('取消修改:', row, prop);
-            this.$message.info('已取消');
-            this.$set(this.tableData, row)
-        },
-        // 表格气泡框-----
+    },
+    handleFilter(column) {
+      // 在这里处理筛选逻辑
+      console.log('筛选列:', column);
+    },
+    // 部分情况可能导致页面不更新，增加 key 强制重新渲染
+    random() {
+      var randomNumber = Math.random();
+      return randomNumber
+    },
+    onSwitchChange(value) {
+      console.log('Switch/ 状态变化:', this.switchValue, value);
+      // console.log('Switch 状态变化:',this.form.switchValue2,this.form.switchValue3, value);
+    },
+    onSwitchChange1(value) {
+      // 操作表格内的 看一下是否同步修改了
+      // console.log(this.tableData2,value,'this.tableData2===');
+      console.log('Switch/ 状态变化:', value.statu);
+    },
+    // 弹框相关方法---start
+    openDialog() {
+      console.log(this.switchValue1, 'switchValue1');
+      this.dialogVisible = true;
+    },
+    openDialog1() {
+      this.dialogVisible1 = true;
+    },
+    openDialog2() {
+      this.dialogVisible2 = true;
+    },
+    // 确认按钮事件
+    handleConfirm() {
+      this.$message.success('点击了确认按钮');
+      this.dialogVisible = false;
+    },
+    // 取消按钮事件
+    handleCancel() {
+      this.$message.warning('点击了取消按钮');
+      this.dialogVisible = false;
+      this.dialogVisible1 = false;
+      this.dialogVisible2 = false;
+    },
+    // 关闭弹框事件
+    handleClose() {
+      this.$message.info('弹框已关闭');
+      this.dialogVisible = false;
+      this.dialogVisible1 = false;
+      this.dialogVisible2 = false;
+    },
+    dialogVisibleChange(data) {
+      console.log(data, 'data098908090');
+    },
+    // 弹框相关方法---end
 
-        // 监听单选框组变化
-        radioChange(data) {
-            console.log(data, 'radio--data');
-        },
-        selectChangeTest(val){
-            console.log(val,'select-----选中的',this.form.card,this.form.card1);
-        },
-        handleClick(row) {
-            console.log(row);
-        },
-        submitForm() {
-            this.$refs.formRef.validate((valid) => {
-                console.log(this.form, '======formxinxi');
-                if (valid) {
-                    alert('提交成功!');
-                } else {
-                    return false;
-                }
-            });
-        },
-        // 重置表单
-        resetForm() {
-            this.$refs.form.resetFields();
-        },
-        triggerError() {
-            this.$refs.formRef.validateField('username', (error) => {
-                if (error) {
-                    console.log('错误信息:', error);
-                } else {
-                    console.log('无错误');
-                }
-            });
-        },
-        getFormdata() {
-            console.log(this.$refs.GuipInput.value);
-        },
-        handleInput(value) {
-            console.log(value, 'value===输入框输入得知');
-        },
-        handleClear(value) {
-            this.form.input3 = '这是我清除后给的文案'
-            // this.handleInput('')
-            console.log(value, 'value===qinghcu');
-        },
-        getList() {
-            const dataList = rules();
-            dataList.forEach((item) => {
-                if (item.field === "id") {
-                    item.options = this.cities;
-                }
-                if (item.field === "id1") {
-                    item.options = this.optionss;
-                }
-            });
-            console.log(this.formList,'this.formList====');
-            this.formList = dataList;
-        },
-        save() {
-            this.$refs.VabForm.submitForm("ruleForm");
-        },
-        //取消
-        cancellation() {
-            this.$refs.VabForm.resetForm("ruleForm");
-        },
-        // 表格点击、选择
-        handleSelectionChange(data) {
-            // 多选模式下的时候 data 为数组格式
-            // 单选的时候是 对象
-            console.log(data, '表格行信息');
-        },
-        // 全选按钮
-        toggleAllSelection() {
-            // console.log(this.$refs.multipleTable,'this.$refs.multipleTable');
-            this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();
-        },
+    // 选择表格某一项 点击  
+    handlePriceClick(row) {
+      this.currentRow = row;
+      this.editedPrice = row.price;
+      this.dialogVisible = true;
+    },
+
+    // 表格气泡框-----
+    // 确认事件
+    onConfirm(row, prop) {
+      console.log('确认修改:', row, prop);
+      this.$message.success('修改成功');
+      this.$set(this.tableData4, row)
+      console.log(this.tableData4, 'this.tableData=====');
+    },
+    // 取消事件
+    onCancel(row, prop) {
+      console.log('取消修改:', row, prop);
+      this.$message.info('已取消');
+      this.$set(this.tableData, row)
     },
-    beforeDestroy() {
-        if (this.timer) {
-            clearTimeout(this.timer)
-            // 确保离开组件时关闭 loading
-            this.$store.dispatch('hideContentLoading')
+    // 表格气泡框-----
+
+    // 监听单选框组变化
+    radioChange(data) {
+      console.log(data, 'radio--data');
+    },
+    selectChangeTest(val) {
+      console.log(val, 'select-----选中的', this.form.card, this.form.card1);
+    },
+    handleClick(row) {
+      console.log(row);
+    },
+    submitForm() {
+      this.$refs.formRef.validate((valid) => {
+        console.log(this.form, '======formxinxi');
+        if (valid) {
+          alert('提交成功!');
+        } else {
+          return false;
+        }
+      });
+    },
+    // 重置表单
+    resetForm() {
+      this.$refs.form.resetFields();
+    },
+    triggerError() {
+      this.$refs.formRef.validateField('username', (error) => {
+        if (error) {
+          console.log('错误信息:', error);
+        } else {
+          console.log('无错误');
+        }
+      });
+    },
+    getFormdata() {
+      console.log(this.$refs.GuipInput.value);
+    },
+    handleInput(value) {
+      console.log(value, 'value===输入框输入得知');
+    },
+    handleClear(value) {
+      this.form.input3 = '这是我清除后给的文案'
+      // this.handleInput('')
+      console.log(value, 'value===qinghcu');
+    },
+    getList() {
+      const dataList = rules();
+      dataList.forEach((item) => {
+        if (item.field === "id") {
+          item.options = this.cities;
+        }
+        if (item.field === "id1") {
+          item.options = this.optionss;
         }
+      });
+      console.log(this.formList, 'this.formList====');
+      this.formList = dataList;
+    },
+    save() {
+      this.$refs.VabForm.submitForm("ruleForm");
+    },
+    //取消
+    cancellation() {
+      this.$refs.VabForm.resetForm("ruleForm");
+    },
+    // 表格点击、选择
+    handleSelectionChange(data) {
+      // 多选模式下的时候 data 为数组格式
+      // 单选的时候是 对象
+      console.log(data, '表格行信息');
+    },
+    // 全选按钮
+    toggleAllSelection() {
+      // console.log(this.$refs.multipleTable,'this.$refs.multipleTable');
+      this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();
+    },
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      // 确保离开组件时关闭 loading
+      this.$store.dispatch('hideContentLoading')
     }
+  }
 }
 </script>
 
@@ -999,117 +1039,119 @@ h2 {
   padding-bottom: 10px;
   border-bottom: 1px solid #f0f0f0;
 }
+
 .elementWrap {
-    /* width: 100%; */
-    padding: 30px 40px;
-    background: #fff;
+  /* width: 100%; */
+  padding: 30px 40px;
+  background: #fff;
 
-    .ele-item {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        margin: 20px 0 30px;
+  .ele-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 20px 0 30px;
 
-        label {
-            font-size: 16px;
-            font-weight: bold;
-            width: 100px;
-            margin-right: 10px;
-            text-align: left;
-        }
+    label {
+      font-size: 16px;
+      font-weight: bold;
+      width: 100px;
+      margin-right: 10px;
+      text-align: left;
     }
+  }
 }
 
 // 组合框样式 start
 // input drop组合使用
 .combo-formItem {
-    ::v-deep {
-        .form-item-bottom {
-            position: relative;
-        }
-
-        .select-trigger {
-            background: #F6F7FA;
-            border-color: transparent;
-        }
+  ::v-deep {
+    .form-item-bottom {
+      position: relative;
+    }
 
-        .is-open .select-trigger {
-            border-color: #006AFF;
-        }
+    .select-trigger {
+      background: #F6F7FA;
+      border-color: transparent;
+    }
 
-        .el-input__inner {
-            border-radius: 2px 0 0 2px;
-        }
+    .is-open .select-trigger {
+      border-color: #006AFF;
     }
 
-    .self-drop-wrap {
-        position: absolute;
-        z-index: 1;
-        width: 100%;
+    .el-input__inner {
+      border-radius: 2px 0 0 2px;
     }
+  }
 
-    .appendDrop {
-        height: 38px;
-        align-items: center;
-        border-radius: 0 2px 2px 0;
-        border: 1px solid #DFE2E6;
-        border-left-color: transparent;
-        justify-content: center;
-        box-sizing: border-box;
-        padding: 0 30px 0 12px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
+  .self-drop-wrap {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+  }
 
-        &:hover {
-            border: 1px solid #006AFF;
-        }
+  .appendDrop {
+    height: 38px;
+    align-items: center;
+    border-radius: 0 2px 2px 0;
+    border: 1px solid #DFE2E6;
+    border-left-color: transparent;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0 30px 0 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &:hover {
+      border: 1px solid #006AFF;
     }
+  }
 }
 
 // 组合框样式 end
 
 .ScaleBox {
-    width: 1000px;
-    background-size: 100% 100%;
-    -ms-transition: 0.3s;
-    transition: 0.3s;
-    -ms-transform-origin: 0 0;
-    transform-origin: 0 0;
-    margin: 0 auto;
+  width: 1000px;
+  background-size: 100% 100%;
+  -ms-transition: 0.3s;
+  transition: 0.3s;
+  -ms-transform-origin: 0 0;
+  transform-origin: 0 0;
+  margin: 0 auto;
 }
 
 .cardfooter {
-    width: 100%;
-    bottom: 20px;
-    right: 30px;
-    text-align: right;
-    justify-content: center;
+  width: 100%;
+  bottom: 20px;
+  right: 30px;
+  text-align: right;
+  justify-content: center;
 }
 
 .btn1 {
-    cursor: pointer;
-    font-weight: bold;
-    width: 114px;
-    height: 40px;
-    /* 自动布局 */
-    display: flex;
-    align-items: center;
-    padding: 11px 12px;
-    box-sizing: border-box;
-    color: #FFFFFF;
-    border-radius: 4px;
-    transition: all .3s;
-    background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
+  cursor: pointer;
+  font-weight: bold;
+  width: 114px;
+  height: 40px;
+  /* 自动布局 */
+  display: flex;
+  align-items: center;
+  padding: 11px 12px;
+  box-sizing: border-box;
+  color: #FFFFFF;
+  border-radius: 4px;
+  transition: all .3s;
+  background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
 
-    &:hover {
-        opacity: 0.7;
-        background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
-    }
+  &:hover {
+    opacity: 0.7;
+    background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
+  }
 }
-.btns{
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
+
+.btns {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 }
 </style>
\ No newline at end of file
diff --git a/packages/GuipFormItem/index.js b/packages/GuipFormItem/index.js
new file mode 100644
index 0000000..bfe6152
--- /dev/null
+++ b/packages/GuipFormItem/index.js
@@ -0,0 +1,7 @@
+import GuipFormItem from './src/index.vue'
+
+GuipFormItem.install = function(Vue) {
+  Vue.component(GuipFormItem.name || 'GuipFormItem', GuipFormItem)
+}
+
+export default GuipFormItem
\ No newline at end of file
diff --git a/packages/GuipFormItem/src/index.vue b/packages/GuipFormItem/src/index.vue
new file mode 100644
index 0000000..50146bc
--- /dev/null
+++ b/packages/GuipFormItem/src/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div 
+  :class="[{'column':column},{'error':hasError},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item1']">
+      <div class="form-item-top">
+          <label v-if="label" for="">{{ label }}
+              <img src="../../assets/require.svg" v-if="required" alt="">
+          </label>
+          <template >
+              <slot name="formLeft"></slot>
+          </template>
+          <template >
+              <slot name="formRight"></slot>
+          </template>
+      </div>
+      <div class="form-item-bottom">
+          <template >
+              <slot name="formDom"></slot>
+          </template>
+      </div>
+  </div>
+</template>
+<script>
+export default {
+   name: 'GuipFormItem',
+   props:['label','required','addClass','column'],
+   data() {
+       return {
+          hasError: false,
+          // 目前这两个宽度用的最多，其余宽度自定义类名修改吧
+          classList:{
+              'w510':'w510',
+              'w388':'w388'
+          }
+       }
+   },
+   computed: {
+      // dynamicClasses() {
+      //     return {
+      //         active: this.isActive, // 如果isActive为true，则添加'active'类
+      //         error: this.hasError,  // 如果hasError为true，则添加'error'类
+      //         highlighted: this.isHighlighted, // 如果isHighlighted为true，则添加'highlighted'类
+      //     };
+      // }
+  },
+   mounted(){
+      //  console.log(this.required,'required----');
+   }
+ }
+</script>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/packages/GuipMessage/GuipMessage.vue b/packages/GuipMessage/GuipMessage.vue
new file mode 100644
index 0000000..256bead
--- /dev/null
+++ b/packages/GuipMessage/GuipMessage.vue
@@ -0,0 +1,170 @@
+<template>
+  <transition name="fade">
+    <div v-if="visible" class="custom-message" :class="[type, position]">
+      <img v-if="showImage" :src="imageUrl" class="message-image" />
+      <i v-else :class="iconClass"></i>
+      <span class="message-content">{{ message }}</span>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'CustomMessage',
+  props: {
+    type: {
+      type: String,
+      default: 'info',
+      validator: value => ['success', 'warning', 'error', 'info'].includes(value)
+    },
+    message: {
+      type: String,
+      required: true
+    },
+    duration: {
+      type: Number,
+      default: 3000
+    },
+    position: {
+      type: String,
+      default: 'top-center',
+      validator: value => ['top-center', 'top-right', 'top-left', 'bottom-center', 'bottom-right', 'bottom-left'].includes(value)
+    },
+    showImage: {
+      type: Boolean,
+      default: false
+    },
+    imageUrl: {
+      type: String,
+      default: ''
+    },
+    iconClass: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  mounted() {
+    this.visible = true
+    this.startTimer()
+  },
+  methods: {
+    startTimer() {
+      if (this.duration > 0) {
+        setTimeout(() => {
+          this.close()
+        }, this.duration)
+      }
+    },
+    close() {
+      this.visible = false
+      setTimeout(() => {
+        this.$destroy()
+        this.$el.parentNode.removeChild(this.$el)
+      }, 300)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-message {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  padding: 14px 21px;
+  transition: all 0.3s;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0.08em;
+  color: #626573;
+  border-radius: 4px;
+  background: #FFFFFF;
+  /* 阴影/低阴影 */
+  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
+}
+
+/* 位置样式 */
+.top-center {
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.top-right {
+  top: 20px;
+  right: 20px;
+}
+.top-left {
+  top: 20px;
+  left: 20px;
+}
+.bottom-center {
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bottom-right {
+  bottom: 20px;
+  right: 20px;
+}
+.bottom-left {
+  bottom: 20px;
+  left: 20px;
+}
+
+/* 类型样式 */
+/* .success {
+  background-color: #f6ffed;
+  border: 1px solid #b7eb8f;
+  color: #52c41a;
+}
+.info {
+  background-color: #e6f7ff;
+  border: 1px solid #91d5ff;
+  color: #1890ff;
+}
+.warning {
+  background-color: #fffbe6;
+  border: 1px solid #ffe58f;
+  color: #faad14;
+}
+.error {
+  background-color: #fff2f0;
+  border: 1px solid #ffccc7;
+  color: #f5222d;
+} */
+
+.message-image {
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+}
+
+/* 动画效果 */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+.fade-enter.top-center, .fade-leave-to.top-center {
+  transform: translate(-50%, -20px);
+}
+.fade-enter.top-right, .fade-leave-to.top-right,
+.fade-enter.top-left, .fade-leave-to.top-left {
+  transform: translateY(-20px);
+}
+.fade-enter.bottom-center, .fade-leave-to.bottom-center {
+  transform: translate(-50%, 20px);
+}
+.fade-enter.bottom-right, .fade-leave-to.bottom-right,
+.fade-enter.bottom-left, .fade-leave-to.bottom-left {
+  transform: translateY(20px);
+}
+</style>
\ No newline at end of file
diff --git a/packages/GuipMessage/index.js b/packages/GuipMessage/index.js
new file mode 100644
index 0000000..094216d
--- /dev/null
+++ b/packages/GuipMessage/index.js
@@ -0,0 +1,94 @@
+import Vue from 'vue'
+import GuipMessage from './GuipMessage.vue'
+
+// 默认图标配置
+const defaultIcons = {
+  success: 'icon-success', // 替换为你的图标类名
+  info: 'icon-info',
+  warning: 'icon-warning',
+  error: 'icon-error'
+}
+
+// 默认图片配置
+const defaultImages = {
+  success: require('../assets/message_Success.png'),
+  info: require('../assets/message_Warning.png'),
+  warning: require('../assets/message_Warning.png'),
+  error: require('../assets/message_error.png')
+}
+const MessageConstructor = Vue.extend(GuipMessage)
+
+// let messageInstance = null
+let messageQueue = []
+
+function showMessage(options) {
+  if (typeof options === 'string') {
+    options = {
+      message: options
+    }
+  }
+
+  // 合并默认配置
+  const config = {
+    type: 'info',
+    duration: 3000,
+    position: 'top-center',
+    showImage: true,
+    ...options
+  }
+
+  // 设置图标或图片
+  if (config.showImage) {
+    config.imageUrl = options.imageUrl || defaultImages[config.type]
+  } else {
+    config.iconClass = options.iconClass || defaultIcons[config.type]
+  }
+
+  // 创建实例
+  const instance = new MessageConstructor({
+    propsData: config
+  })
+
+  // 挂载到DOM
+  instance.$mount()
+  document.body.appendChild(instance.$el)
+
+  // 添加到队列
+  messageQueue.push(instance)
+
+  // 返回关闭方法
+  return {
+    close: () => instance.close()
+  }
+}
+
+function install(Vue, options = {}) {
+  // 合并默认配置
+  if (options.icons) {
+    Object.assign(defaultIcons, options.icons)
+  }
+  if (options.images) {
+    Object.assign(defaultImages, options.images)
+  }
+
+  // 添加全局方法
+  Vue.prototype.$Message = showMessage
+  Vue.prototype.$Message.closeAll = () => {
+    messageQueue.forEach(instance => instance.close())
+    messageQueue = []
+  }
+
+  // 添加快捷方法
+  const types = ['success', 'info', 'warning', 'error']
+  types.forEach(type => {
+    Vue.prototype.$Message[type] = (message, options = {}) => {
+      return showMessage({
+        message,
+        type,
+        ...options
+      })
+    }
+  })
+}
+
+export default { install }
\ No newline at end of file
diff --git a/packages/assets/dropDown_expand.png b/packages/assets/dropDown_expand.png
index ec5192d3876b4e6955030d733da61f7be7fb5c34..91553a3c36652e8a9c826b0b272663766b83b666 100644
GIT binary patch
delta 282
zcmZ3;x{_&vL_G^L0|P^Zd(K-RB^}@s;tHe_G76H?N|I8Fl2VI-C^@+}8O%tqST6vS
z<|qmB3uaL0Z@B+H;Jo+dgRMZZt)4E9As)xyPP7$ja^PtdpSdvY3iAoxE#BG31vPBj
zY^|Q%*wB$96qm7L&du=DPv7^QZJRLlYr9qby=|Xef7dOjy1Mt3rpC<bD-LI-Yg&BJ
z59)gPI_Kb@mAQK>jLwTawE1=~x7p`d+UdyBqTDUUbCw)DQFKdiufR;HbEezmHgbnA
zYw=T`^dK-x*Q%STxm~omBOp@v-<?)rVJ^RRgF>s8&dbU^bL1W#x|x5~-EaPf)xpA>
dHkD;Cgb4eEzft+I&>H9k22WQ%mvv4FO#tY$dGP=M

delta 661
zcmV;G0&4xK0-*(v7=H)`00020X>r~F0004VQb$4nuFf3k00004b3#c}2nYxWd<bNS
z0006@Nkl<Zc%1FnF;d$=7>40byYBH3bc8TNM`LbaZlFjLjk_pg6{N!SWH24W48%8Z
zTB>w(jC}+j0eWjUg(Wayf4quzrOfa@r7Tvf)#?QdFvb{TjDIo47-Nhv#@GiEP#;92
zEEKBu6-qs+o|?_BrmGg`)tK%4jSCQsvQQNAH-NA_^cX07zPb7F%g=P(N|NzV3;YDo
zFAuGhERIZzAWQ>@wTSR?^8nD-0`oY{CvK<eUYzC=EilK+%>%$@Hy9Wf07C2;k86Dz
zr};(GN%|6}`F{npJ~e)*)RXCO&v>p_Uy4Ew@p>0*Xq_cr#)Co@$Nx(gqEQygLe90;
zpNLads;6eA58jX9>khmflz6Y&)O4QaR{+55YPwRgI0}FzaY`r(xk!@nu-1$nN|NzV
z6mkLL<^y24>miXlU|acaW#kD#aCUorKCv0gl{n2O<bV4P06{Rly*~f8YaD5FvBksv
z-TuL00AN6zGT1*j>@Obf?`+0vs(c_P<O!Px^4(@Es~u1={C@p=u%*v9KF1EAVpsd`
zm0Al>O`?l9`noO|K}r{KbP+pB?H#bKjX1iB9mOhw6yI@l89Q=_CO=$p9Y-Irqc~Xr
zz+I%;j(=?J2vS_c(P!)^&UV1Ie~F{-*ijlqkWx2}ZN!co+Q*<3n>YeM8?mE!T>!u;
zYLr&~-F6m1ibWjX@DaOruGOBMaRj`@j^ZVPl$~+(7&}U<JD_5SV`pExcd`IL8OODV
vAjF;$>&vdcTV#we#u#IaF~%7CF#Z62EqB|fW)3(900000NkvXXu0mjf1Kca^

diff --git a/packages/assets/message_Success.png b/packages/assets/message_Success.png
new file mode 100644
index 0000000000000000000000000000000000000000..786586d874bb899dfc0a92bb39cb5c3c0dab8d55
GIT binary patch
literal 802
zcmV+-1Ks?IP)<h;3K|Lk000e1NJLTq002k;002k`0{{R3VlzW^0001HP)t-s00000
zzhD5tVF1El0K#AZ!C?TwVF1Em0KZ@WzhD5rU;x8l0KZ@W!e9WwU;x5k0K#D)$#rkt
zrVz$!FwK77_v`=v|L^<tVA-62;IOak&2ZeNkL0>Q(TKnB*PrOa&-39>)soRCbRYl#
z01$LiPE!CtUyrZP-|sLWU~dq=fN=eaAS?g?0$WK$K~z}7t(e<(gCGz^6%is)L*gwq
zwoU*4Ckw_XAoqCQ8tPum92gjq#G({rFh`hDgb>WYDTz@*AS1}a@LUFBNJR~*fIq7w
zh+2eePt?VVnNb%H%*l!2%2OAo_Q7yvcB{OmvrMY^G^{mK#&tzPFkHmoRw#$k%OUeI
z%;^-vp>&t00>^=n>RlekVI-N8#d0XEMNS&ek<%0%m=avX3KF%hrZUp8bxQC0<h|of
zBF9W<%@PRu=z6;~hACAcoVM%x;jaE#&5;GohjExj^>@Be&H<d}#o3d1Y%l=ywQ%}Q
z8GsBF;Mw@*^n)^jgX+*@<@A#}mIj#ry>YtT3IP5E<T`Ae>uxmj&h=^-Q@bCAiSJSN
zvvD4p;oKKAZJbdzjyyqvVZYjcz==K~)ARW!{4E&vY_wlcJ?JTiU^i?5=@#~{9E4!l
z&>A?}96gjU1jFvs2+|xNog9eEumuEdARfxLQw@gAg1Rjte9As{8^)DsH?2f+8^#6n
zr}aa_8EhPWZfgtMeb|BiY#eMXwQZ+xMjK}?wT3I-RVGbV4n6a`nqjOF)?xo+=g`u6
zKyE9sYwVoLah)B#45QrqS>}>-e}TRo99%kY*zI5_t&-l?$kI|Jo7>d7IJi9e>X&#Q
zC0ga5_YW^g&EyByNTrpG4lb8DK~1PAylY60YO{`O{Ellyk86%uo`QM+WO)WE0{Sgv
zc|b@4TFE+bDD|2Y@_F65I5UNOo_(0g+KNIX;7tpdpT>wcWnrClk9DL7#JqF@8AOO}
gXN+=~0qZN)Kl957Uiq5{WdHyG07*qoM6N<$f+3l9v;Y7A

literal 0
HcmV?d00001

diff --git a/packages/assets/message_Warning.png b/packages/assets/message_Warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a4c25940280c43f26f23b4d1a3c2f70051defb3
GIT binary patch
literal 654
zcmV;90&)F`P)<h;3K|Lk000e1NJLTq002k;002k`0{{R3VlzW^0000>P)t-s0002@
zfGqrkF8hKl`-3g}gDm=jE&GEl`hY6;fGGNcE&YQo|9~+2gDm-hEc${g`-3g}l1KjN
z*Z=?j{@}{}(6Ima^8VPp{_o{>M0}?J000nlQchC<Kwpoq&)@GbAYgA0zkqQ4iXbci
z00H7jL_t(o!@Zc>vV$-PMKwmEF)G@s{r@jL-rA{cLx?hGKQn89kOW8)LaEAh4h9hb
zbf${rj7qC#!cj(7E)rvF^r%*Rma~9_Ov6OABxXgm3``NkEXvamr{Q20W%N<8+}WKf
zuZH!?l((*I3}%t_oK`Fcu@&*h<5O{lgZP!F(wqaq=h@}wI5X+U$<A^Rn|Ds?x9j@b
ztb4~x6A{?`wyI|ZM^(^m7h&?MCTFgJ;Q2n0H=Y4{mL=&B3$$lR;Z@M?Qhgm%uaV((
z5H1&`k^n8SX$g>?K}G^(!tW3dglXXL*&r2sK$xH`lxr?XC!w#53Cg8FAO$iB%79P~
z6#CEpJ4X=w8QCDQf)u+VVwX0R0Tpr&o7__yX!-h$bEmDUrB|a(y0snYJKD;HKS-A9
z^X=?WYWw`7`u$%r?m~zCu4fzRNSC@{949i@#&KG|?y;QOgCe~R5`;_BR!4*1BInHy
z;|3c27KdT7IS=|6CB4B78))JLwhlEuQXtvpYasQeshh@e@E+Qaaa3yXlN&|lhT}O;
zQDY<!YoIb>kOX3ZkVK4<O%hPbatb)xtu~k`;H-USxrRi6jo4`^|7y&#DLbqBwXCyc
oBxX~gG7T_aX9Ky;6uHIv1Eu=`94=wghyVZp07*qoM6N<$g5owaaR2}S

literal 0
HcmV?d00001

diff --git a/packages/assets/message_error.png b/packages/assets/message_error.png
new file mode 100644
index 0000000000000000000000000000000000000000..194ba3ce51f4f27010b20208bd3a1e03bac830e9
GIT binary patch
literal 746
zcmV<G0u}v<P)<h;3K|Lk000e1NJLTq002k;002k`0{{R3VlzW^00012P)t-s00030
zOiceyPXA3#|4mQ-Oi%w!PybC%|4LB*NKpSxP5(|#|4>l>Oi%wzPX9|y|4dN-O;7)(
zr~lpF|Mc|#($oKAW&g*>|LE!eo1Fi=z5oCJ|88*1knr~a000qmQchC<Kwpoq&)@Gb
zAYgA0zkqN+mitKF0006pNkl<ZSi`ND+m?eM3`H#>D7Cg}>22`;zjJV$wqghZ<veD|
zHY8jUsw$uzt9c_NfDnS$tgUj?DQ*d_B;WUm7<B+b2Nuujm4JZc5Q#blF@LCI1g71@
zOlnSBoFN7?sSc+q%AJ3wx^JiTjug4BR0?L2BC?gr0XP=%hw!P*;Q*jGbutem*12o)
zIF{sc>Rb-Mu;iTbIc}J;C$^eg#tK^My_)*WjJ;iYolm|Uf4=DJZEd{W_2cRJSkVss
z7%M%x#!*k!A2Lde;H*hA$4i=B!sq<c7)*L`j5(tLhrgNOA3O{ueK_WVM@$=KkIkPk
zZ_>E5`RB&5`EJ&vCC6Ox2yQ{1oZa+_<Z$#2kC4PU<PIE1ZSZ7W?R?2cq-_o`>Hu*_
z+Z=n%aY!Li92;%&D)W&@4m32#L!vo$y9F-SH7UTc`3Hz4g*X7^Kr)sSCW&&vZsIv1
zk|?(zi*1o&n|8O&i8)5vatE6)+E?U&L%RE7?JfDz5C8pCt6}rS6OaYzfk*WI3-as>
z?1zM}{{vOdre4`>zWfD2iY_8#PgmH_hrZ*o=Bh7e&&RJavQKJ3Xot#`epU6AOU?KF
z!>rS?(2i~#u~w~Q_T(CulhlMRB~e3Ks?93b_?2r#%QeR~PDxFP2s{II3H_D`JRnpF
zt>jQ`=oICYh<V*QZbnMPJo{MnLl7lY!kZSOpT<-)<)5|pJ=Uo%5i_f0H5bBeXDJ$9
cvt8)hUj}_96nFIDfB*mh07*qoM6N<$f@R!kQ~&?~

literal 0
HcmV?d00001

diff --git a/packages/index.js b/packages/index.js
index f9ed3b1..b8731ba 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -13,12 +13,32 @@ import GuipTable from './GuipTable';
 import GuipSwitch from './GuipSwitch';
 import GuipTooltip from './GuipToolTip';
 import GuipDialog from './GuipDialog';
-import 'core-js/stable'
+import GuipMessage from './GuipMessage/index';
+
+import GuipFormItem from './GuipFormItem';
+
+// 表格头部 添加自定义小图标 *
+// import HeaderIcon from './utils/headerIcon'
+// Vue.mixin(HeaderIcon)
+
+
+// 复制到粘贴板
+import clipboard from './utils/dirClipBoard';
+import { modernCopyToClipboard } from './utils/clipboard';
+
+import 'core-js/stable';
 import 'element-ui/lib/theme-chalk/index.css'; // 如果依赖Element
 import './styles/index.css'; // 全局引入
 import './styles/common.scss'; // 全局引入
 import './styles/component.scss'; // 全局引入
 
+// import EventBus, {
+//   $on,
+//   $once,
+//   $off,
+//   $emit
+// } from './utils/eventBus'
+
 const components = [
   GuipButton,
   GroupFormBtns,
@@ -34,10 +54,23 @@ const components = [
   GuipTable,
   GuipTooltip,
   GuipSwitch,
-  GuipDialog
+  GuipDialog,
+  GuipFormItem
 ]
 
 const install = function (Vue) {
+   // 挂载到Vue原型
+  //  Vue.prototype.$eventBus = EventBus
+  //  Vue.prototype.$on = $on
+  //  Vue.prototype.$emit = $emit
+  //  Vue.prototype.$off = $off
+  //  Vue.prototype.$once = $once
+// 复制
+  Vue.use(GuipMessage)
+  Vue.prototype.$copy = modernCopyToClipboard;
+  Vue.use(clipboard);
+
+
   components.forEach(component => {
     if (!component.name) {
       throw new Error(`Component name is required: ${component}`)
@@ -45,6 +78,7 @@ const install = function (Vue) {
     Vue.component(component.name, component)
   })
 }
+console.log(install,'install---');
 
 export default {
   install,
@@ -62,5 +96,6 @@ export default {
   GuipTable,
   GuipTooltip,
   GuipSwitch,
-  GuipDialog
+  GuipDialog,
+  GuipFormItem
 }
\ No newline at end of file
diff --git a/packages/styles/component.scss b/packages/styles/component.scss
index 166c407..e878264 100644
--- a/packages/styles/component.scss
+++ b/packages/styles/component.scss
@@ -215,6 +215,7 @@
     }
 
 }
+
 .guip-svg-icon-wrapper .svg-icon ::v-deep path {
     fill: currentColor;
 }
@@ -296,4 +297,86 @@
         font-size: 12px;
         margin-left: 10px;
     }
-}
\ No newline at end of file
+}
+
+// 自定义下拉选择框组件 start
+.guip-custom-select {
+    height: 38px;
+    position: relative;
+    font-family: Arial, sans-serif;
+
+    .select-trigger {
+        border-radius: 2px;
+        opacity: 1;
+        background: #FFFFFF;
+        border: 1px solid #DFE2E6;
+        width: 100%;
+        height: 40px;
+        box-sizing: border-box;
+        padding: 10px 12px;
+        cursor: pointer;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .is-open .select-trigger {
+        border: 1px solid #006AFF;
+        transition: all .5s;
+        outline: 3px solid #D8E9FA;
+    }
+
+    .select-trigger:hover {
+        border-color: #006AFF;
+        transition: all .5s;
+    }
+
+    .arrow-icon {
+        width: 12px;
+    }
+
+    .select-dropdown {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        width: 100%;
+        border: 1px solid #ccc;
+        box-sizing: border-box;
+        border-radius: 4px;
+        background-color: #fff;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        z-index: 1000;
+        margin-top: 4px;
+        max-height: 384px;
+        overflow-y: auto;
+        padding: 0 12px 12px 12px;
+    }
+
+    .dropdown-item {
+        padding: 12px 10px;
+        cursor: pointer;
+    }
+
+    .dropdown-item:hover {
+        background: #F6F7FA;
+    }
+
+    .dropdown-item.is-selected {
+        background-color: #F6F7FA;
+        color: #006AFF;
+    }
+
+    /* 展开收起动画 */
+    .slide-fade-enter-active,
+    .slide-fade-leave-active {
+        transition: all 0.3s ease;
+    }
+
+    .slide-fade-enter-from,
+    .slide-fade-leave-to {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+}
+
+// 自定义下拉选择框组件 end
\ No newline at end of file
diff --git a/packages/utils/clipboard.js b/packages/utils/clipboard.js
new file mode 100644
index 0000000..4c81896
--- /dev/null
+++ b/packages/utils/clipboard.js
@@ -0,0 +1,77 @@
+/**
+ * 复制文本到剪贴板
+ * @param {string} text 要复制的文本
+ * @param {Object} options 配置选项
+ * @param {string} options.successMsg 成功提示信息
+ * @param {string} options.errorMsg 失败提示信息
+ * @param {Vue} options.vm Vue实例(用于调用$Message)
+ * @returns {Promise<boolean>} 是否复制成功
+ */
+export function copyToClipboard(text, options = {}) {
+  const {
+    successMsg = '复制成功',
+      errorMsg = '复制失败，请手动复制',
+      vm = null
+  } = options;
+
+  return new Promise((resolve) => {
+    // 创建textarea元素
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.style.position = 'fixed'; // 防止页面滚动
+    document.body.appendChild(textarea);
+    textarea.select();
+
+    try {
+      // 执行复制命令
+      const successful = document.execCommand('copy');
+    console.log(vm,'vm.$Message---');
+      if (successful) {
+        if (vm && vm.$Message) {
+          vm.$Message.success(successMsg);
+        } else {
+          console.log(successMsg);
+        }
+        resolve(true);
+      } else {
+        throw new Error('Copy command was unsuccessful');
+      }
+    } catch (err) {
+      console.error('复制失败11:', err);
+      if (vm && vm.$Message) {
+        vm.$Message.error(errorMsg);
+      } else {
+        console.error(errorMsg);
+      }
+      resolve(false);
+    } finally {
+      document.body.removeChild(textarea);
+    }
+  });
+}
+
+/**
+ * @param {string} text 要复制的文本
+ * @param {Object} options 配置选项
+ * @returns {Promise<boolean>} 是否复制成功
+ */
+export async function modernCopyToClipboard(text, options = {}) {
+  const {
+    successMsg = '复制成功',
+      errorMsg = '复制失败，请手动复制',
+      vm = null
+  } = options;
+  if (navigator.clipboard && window.isSecureContext) {
+    // 注意：localhost 可能会无效 或者 提示复制失败，但是其实已经复制到粘贴板
+    await navigator.clipboard.writeText(text);
+      if (vm && vm.$Message) {
+        vm.$Message.success(successMsg);
+      } else {
+        console.log(errorMsg);
+      }
+  } else {
+    return copyToClipboard(text, options);
+  }
+}
+
+export default modernCopyToClipboard;
\ No newline at end of file
diff --git a/packages/utils/common.js b/packages/utils/common.js
new file mode 100644
index 0000000..f2af514
--- /dev/null
+++ b/packages/utils/common.js
@@ -0,0 +1,32 @@
+// 设置页面元素对应高亮
+export function setHighActive(dom) {
+    const ele = document.getElementById(dom)
+    ele.classList.add('ceshi')
+    ele.scrollIntoView({behavior:'smooth',block:'start'})
+    setTimeout(()=>{
+        ele.classList.remove('ceshi')
+    },1000)
+}
+
+export function getServicePriceDesc(price, price_unit, unit_num) {
+    let unit = 0;
+    let unit_str = "";
+
+    if (unit_num == 1) return price + price_unit +'/篇';
+
+    if (unit_num/10000 < 10) {
+        unit = Math.ceil(unit_num/10000);
+        unit_str = unit == 1 ? '万' : unit+'万';
+    }
+    if (unit_num/1000 < 10) {
+        unit = Math.ceil(unit_num/1000);
+        unit_str = unit == 1 ? '千' : unit+'千';
+    }
+    if (unit_num/100 < 10) {
+        unit = Math.ceil(unit_num/100);
+        unit_str = unit == 1 ? '百' : unit+'百';
+    }
+
+    return price + price_unit + "/" +unit_str + "字符";
+}
+
diff --git a/packages/utils/dirClipBoard.js b/packages/utils/dirClipBoard.js
new file mode 100644
index 0000000..73ddd76
--- /dev/null
+++ b/packages/utils/dirClipBoard.js
@@ -0,0 +1,19 @@
+import modernCopyToClipboard from './clipboard';
+
+export default {
+  install(Vue) {
+    Vue.directive('clipboard', {
+      bind(el, binding) {
+        el.style.cursor = 'pointer';
+        el.addEventListener('click', async () => {
+          const text = binding.value || el.innerText;
+          const options = {
+            vm: binding.instance,
+            ...(binding.arg || {})
+          };
+          await modernCopyToClipboard(text, options);
+        });
+      }
+    });
+  }
+};
\ No newline at end of file
diff --git a/packages/utils/eventBus.js b/packages/utils/eventBus.js
new file mode 100644
index 0000000..2919ea8
--- /dev/null
+++ b/packages/utils/eventBus.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+// 创建全局事件总线
+const EventBus = new Vue()
+
+// 封装常用方法
+export const $on = EventBus.$on.bind(EventBus)
+export const $once = EventBus.$once.bind(EventBus)
+export const $off = EventBus.$off.bind(EventBus)
+export const $emit = EventBus.$emit.bind(EventBus)
+
+export default EventBus
\ No newline at end of file
diff --git a/packages/utils/headerIcon.js b/packages/utils/headerIcon.js
new file mode 100644
index 0000000..b1fe542
--- /dev/null
+++ b/packages/utils/headerIcon.js
@@ -0,0 +1,17 @@
+export default {
+    methods: {
+      renderHeaderWithIcon(h, { column }, iconPath) {
+        return h('div', [
+          column.label,
+          h('img', {
+            attrs: { src: iconPath },
+            style: {
+              width: '10px',
+              height: '10px',
+              marginLeft: '3px',
+            }
+          })
+        ])
+      }
+    }
+  }
\ No newline at end of file
diff --git a/packages/utils/request.js b/packages/utils/request.js
new file mode 100644
index 0000000..28c3458
--- /dev/null
+++ b/packages/utils/request.js
@@ -0,0 +1,93 @@
+// src/utils/request.js
+import axios from "axios";
+
+// 创建 axios 实例
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API, // 从环境变量中读取 API 基础地址
+  timeout: 60000, // 请求超时时间
+  headers: {
+    'Content-Type': 'application/x-www-form-urlencoded'
+  },
+});
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    // 在发送请求之前做一些处理，例如添加 token
+    const token = localStorage.getItem("token");
+    if (token) {
+      config.headers["Auth"] = `${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    // 对响应数据做一些处理
+    const res = response.data;
+    if (!res.status) {
+      // 如果返回的 status 不是 true，则视为错误
+      // return Promise.reject(new Error(res.info || "请求失败"));
+    }
+    return res;
+  },
+  (error) => {
+    // 对响应错误做些什么
+    if (error.response) {
+      switch (error.response.status) {
+        case 401:
+          // 未授权，跳转到登录页
+          window.location.href = "/login";
+          break;
+        case 404:
+          // 资源未找到
+          console.error("资源未找到");
+          break;
+        case 500:
+          // 服务器错误
+          console.error("服务器错误");
+          break;
+        default:
+          console.error("请求失败", error.message);
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+/**
+ * 封装请求方法
+ * @param {string} method 请求方法 (GET, POST, PUT, DELETE 等)
+ * @param {string} url 请求地址
+ * @param {object} data 请求参数
+ * @param {object} config 其他 axios 配置
+ * @returns {Promise} 返回请求结果
+ */
+const request = (method, url, data = {}, config = {}) => {
+  const lowerCaseMethod = method.toLowerCase();
+  if (lowerCaseMethod === "get") {
+    // GET 请求将参数拼接到 URL 上
+    return service({
+      method: "get",
+      url,
+      params: data,
+      ...config,
+    });
+  } else {
+    // 其他请求（POST, PUT, DELETE 等）将参数放在请求体中
+    return service({
+      method: lowerCaseMethod,
+      url,
+      data,
+      ...config,
+    });
+  }
+};
+
+export default request;
\ No newline at end of file