From 7ceb9dad0ba2eccbadf7671a9693894a0fd67474 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Tue, 22 Jul 2025 17:53:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9message=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/package-lock.json         |  14 ++---
 examples/src/App.vue               |  20 ++++++-
 packages/GuipInput/src/index.vue   |   2 +-
 packages/GuipMessage/index copy.js |  94 ------------------------------
 packages/GuipMessage/src/index.vue | 100 +-------------------------------
 packages/index.js                  |  14 +++--
 packages/styles/component.scss     | 113 ++++++++++++++++++++++++++++++++++++-
 7 files changed, 147 insertions(+), 210 deletions(-)
 delete mode 100644 packages/GuipMessage/index copy.js

diff --git a/examples/package-lock.json b/examples/package-lock.json
index 691a52d..c630a2b 100644
--- a/examples/package-lock.json
+++ b/examples/package-lock.json
@@ -30,7 +30,7 @@
         },
         "..": {
             "name": "@zhicheng1012/zhicheng-components",
-            "version": "1.0.22",
+            "version": "1.0.23",
             "license": "MIT",
             "dependencies": {
                 "async-validator": "^1.11.5",
@@ -3218,9 +3218,9 @@
             "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
         },
         "node_modules/@zhicheng1012/zhicheng-components": {
-            "version": "1.0.22",
-            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.22.tgz",
-            "integrity": "sha512-vhUvWktJfQVwD6B9D2oJiBPwGJcsqzxvL5/ryLCxL1yTNez4iGlm55G+LGSN9sihXIrNYaBCTcoUychIqR+jfQ==",
+            "version": "1.0.23",
+            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.23.tgz",
+            "integrity": "sha512-n9hEoGUDfVo1quAForqlJJOAAo9u7Pab0Q6ouYT46OEaDMLIrp2B7pB6UnT9NYaLDMFkfLQl5zoxuYJZIl94sw==",
             "dependencies": {
                 "async-validator": "^1.11.5",
                 "core-js": "^3.40.0"
@@ -19478,9 +19478,9 @@
             "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
         },
         "@zhicheng1012/zhicheng-components": {
-            "version": "1.0.22",
-            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.22.tgz",
-            "integrity": "sha512-vhUvWktJfQVwD6B9D2oJiBPwGJcsqzxvL5/ryLCxL1yTNez4iGlm55G+LGSN9sihXIrNYaBCTcoUychIqR+jfQ==",
+            "version": "1.0.23",
+            "resolved": "https://registry.npmjs.org/@zhicheng1012/zhicheng-components/-/zhicheng-components-1.0.23.tgz",
+            "integrity": "sha512-n9hEoGUDfVo1quAForqlJJOAAo9u7Pab0Q6ouYT46OEaDMLIrp2B7pB6UnT9NYaLDMFkfLQl5zoxuYJZIl94sw==",
             "requires": {
                 "async-validator": "^1.11.5",
                 "core-js": "^3.40.0"
diff --git a/examples/src/App.vue b/examples/src/App.vue
index 6230560..0949494 100644
--- a/examples/src/App.vue
+++ b/examples/src/App.vue
@@ -81,7 +81,7 @@
             @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
 
           <div style="width: 20px;height: 10px;"></div>
-          <GuipInput ref="GuipInput" width="133px" label="售价" placeholder="请输入售价" unit="元"></GuipInput>
+          <GuipInput ref="GuipInput" width="200px" label="售价" placeholder="请输入售价" unit="元"></GuipInput>
 
           <GuipInput v-model="form.input3" width="400px">
             <span slot="prependshow">http:</span>
@@ -345,6 +345,7 @@
 </template>
 
 <script>
+// import { GuipMessage } from '@zhicheng1012/zhicheng-components'
 export default {
   data() {
     return {
@@ -694,7 +695,19 @@ export default {
     //     this.$store.dispatch('hideLoading')
     // }, 2000)
     // this.timer = null;
-
+    // GuipMessage({
+    //           type: 'success',
+    //           title: '成功标题',
+    //           message: '这是一条成功的提示消息',
+    //           duration: 5000,
+    //           showClose: true,
+    //           center: true
+    //         })
+    this.$Message({
+      message: '这是一条普通消息',
+      type: 'info',
+      duration: 3000
+    })
   },
   computed: {
     currentDomainItem() {
@@ -714,6 +727,9 @@ export default {
     },
     // 手动copy内容
     handleClickCopy() {
+     
+      // GuipMessage.success('操作成功')
+      // this.$Message.success('操作成功')
       this.$copy(this.form.input1, {
         successMsg: '内容已复制到剪贴板',
         errorMsg: '复制失败，请按Ctrl+C手动复制',
diff --git a/packages/GuipInput/src/index.vue b/packages/GuipInput/src/index.vue
index 2983dff..33bda41 100644
--- a/packages/GuipInput/src/index.vue
+++ b/packages/GuipInput/src/index.vue
@@ -6,7 +6,7 @@
     <el-input :type="type" v-bind="$attrs" :placeholder="placeholder1" :disabled="disabled" :maxlength="maxlength1"
       :style="{ width: width, height: height }" :value="inputValue" :minLength="minLength1" :show-word-limit="showWordLimit"
       @input="$emit('input', $event)" @keydown="handleKeydown" @change="$emit('change', $event)"
-      @blur="$emit('blur', inputValue)" @focus="$emit('focus', inputValue)" >
+      @blur="$emit('blur', inputValue)" @focus="$emit('focus', inputValue)" class="guip-input">
       <!-- 自定义前面小图标 -->
       <template v-slot:prepend>
         <slot name="prependshow"></slot>
diff --git a/packages/GuipMessage/index copy.js b/packages/GuipMessage/index copy.js
deleted file mode 100644
index 094216d..0000000
--- a/packages/GuipMessage/index copy.js	
+++ /dev/null
@@ -1,94 +0,0 @@
-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/GuipMessage/src/index.vue b/packages/GuipMessage/src/index.vue
index b4da854..420f428 100644
--- a/packages/GuipMessage/src/index.vue
+++ b/packages/GuipMessage/src/index.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="fade">
-    <div v-if="visible" class="custom-message" :class="[type, position]">
+    <div v-if="visible" class="guip-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>
@@ -70,101 +70,3 @@ export default {
   }
 }
 </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/index.js b/packages/index.js
index 8199bb7..fb96d02 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -55,7 +55,7 @@ const components = [
   GuipTooltip,
   GuipSwitch,
   GuipDialog,
-  GuipFormItem
+  GuipFormItem,
 ]
 
 const install = function (Vue,options={}) {
@@ -66,13 +66,12 @@ const install = function (Vue,options={}) {
   //  Vue.prototype.$off = $off
   //  Vue.prototype.$once = $once
 
-  console.log(options,'====options.message');
-// 复制
   Vue.prototype.$Message = GuipMessage
+  
+  // 复制
   Vue.prototype.$copy = modernCopyToClipboard;
   Vue.use(clipboard);
 
-
   components.forEach(component => {
     if (!component.name) {
       throw new Error(`Component name is required: ${component}`)
@@ -80,6 +79,7 @@ const install = function (Vue,options={}) {
     Vue.component(component.name, component)
   })
 }
+console.log(install,'install===');
 
 export  {
   GuipButton,
@@ -97,7 +97,8 @@ export  {
   GuipTooltip,
   GuipSwitch,
   GuipDialog,
-  GuipFormItem
+  GuipFormItem,
+  GuipMessage
 }
 export default {
   install,
@@ -116,5 +117,6 @@ export default {
   GuipTooltip,
   GuipSwitch,
   GuipDialog,
-  GuipFormItem
+  GuipFormItem,
+  GuipMessage
 }
\ No newline at end of file
diff --git a/packages/styles/component.scss b/packages/styles/component.scss
index e878264..6be8065 100644
--- a/packages/styles/component.scss
+++ b/packages/styles/component.scss
@@ -379,4 +379,115 @@
     }
 }
 
-// 自定义下拉选择框组件 end
\ No newline at end of file
+// 自定义下拉选择框组件 end
+
+// input 组件 start
+.guip-input {
+    .unit {
+        position: absolute;
+        right: 12px;
+        /* 根据需要调整位置 */
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        /* 防止单位文本影响输入框的点击事件 */
+    }
+}
+
+// input 组件 end
+
+// 提示信息组件 start
+.guip-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);
+
+    .message-image {
+        width: 18px;
+        height: 18px;
+        margin-right: 10px;
+    }
+}
+
+/* 位置样式 */
+.guip-custom-message.top-center {
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.guip-custom-message.top-right {
+    top: 20px;
+    right: 20px;
+}
+
+.guip-custom-message.top-left {
+    top: 20px;
+    left: 20px;
+}
+
+.guip-custom-message.bottom-center {
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.guip-custom-message.bottom-right {
+    bottom: 20px;
+    right: 20px;
+}
+
+.guip-custom-message.bottom-left {
+    bottom: 20px;
+    left: 20px;
+}
+
+
+/* 动画效果 */
+.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);
+}
+
+// 提示信息组件 end
\ No newline at end of file