Merge branch 'master' of http://gits.yunenv.cn/jiaoyi-saas/jiaoyi-vue

src/components/imFloat/im.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="global-im">
+    <!-- 悬浮按钮与角标 -->
+    <div class="im-trigger" :class="{ active: visible }" @click="toggleChat">
+        <el-icon><el-icon-chat-round /></el-icon>
+      <el-badge :value="unreadCount" :hidden="unreadCount === 0" :max="99">
+        <i class="el-icon-chat-dot-round" style="font-size: 24px"></i>
+      </el-badge>
+    </div>
+
+    <!-- IM 聊天窗口 -->
+    <el-drawer
+      v-model="visible"
+      title="消息中心"
+      :append-to-body="true"
+      :destroy-on-close="false"
+    >
+      <div class="chat-container">
+        <div class="message-list" ref="messageListRef">
+          <div
+            v-for="msg in messages"
+            :key="msg.id"
+            class="message-item"
+            :class="msg.self ? 'self' : 'other'"
+          >
+            <div class="avatar">
+              <el-avatar :size="32" :src="msg.avatar"></el-avatar>
+            </div>
+            <div class="content">
+              <div class="name">{{ msg.name }}</div>
+              <div class="text">{{ msg.text }}</div>
+              <div class="time">{{ msg.time }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="input-area">
+          <el-input
+            type="textarea"
+            :rows="3"
+            v-model="inputMessage"
+            placeholder="请输入消息..."
+          ></el-input>
+          <el-button type="primary" style="margin-top: 10px;" @click="sendMessage">发送</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+
+// 注意：Element UI 的图标需要单独引入或使用字体图标
+// 如果使用 el-icon，需要安装 @element-plus/icons-vue（但这是 Vue 3 的）
+// Vue 2 可以使用字体图标或 SVG 图标，这里用 Element UI 自带的字体图标
+
+export default {
+  name: 'GlobalIM',
+  components: {
+    // Element UI 组件已全局注册的话，这里不需要重复注册
+  },
+  data() {
+    return {
+      visible: false,           // 聊天窗口可见性
+      unreadCount: 0,          // 未读消息数量
+      inputMessage: '',        // 输入的消息
+      timer: null,             // 定时器
+      messages: [              // 消息列表
+        { id: 1, name: '系统助手', avatar: '', text: '欢迎使用 SCUI！', time: '10:00', self: false },
+        { id: 2, name: '我', avatar: '', text: '你好，这个全局IM功能不错', time: '10:01', self: true },
+      ]
+    }
+  },
+  mounted() {
+    this.simulateNewMessage()
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  },
+  methods: {
+    // 模拟新消息（演示角标更新）
+    simulateNewMessage() {
+      this.timer = setInterval(() => {
+        if (!this.visible) { // 仅当聊天窗口关闭时增加未读数
+          const newMsg = {
+            id: this.messages.length + 1,
+            name: '访客',
+            avatar: '',
+            text: `自动消息 ${new Date().toLocaleTimeString()}`,
+            time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+            self: false
+          }
+          this.messages.push(newMsg)
+          this.unreadCount++
+        }
+      }, 15000) // 每15秒模拟一条新消息
+    },
+
+    // 发送消息
+    sendMessage() {
+      if (!this.inputMessage.trim()) return
+      const newMsg = {
+        id: this.messages.length + 1,
+        name: '我',
+        avatar: '',
+        text: this.inputMessage,
+        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+        self: true
+      }
+      this.messages.push(newMsg)
+      this.inputMessage = ''
+      // 滚动到底部
+      this.$nextTick(() => {
+        const container = this.$refs.messageListRef
+        if (container) container.scrollTop = container.scrollHeight
+      })
+    },
+
+    // 切换聊天窗口
+    toggleChat() {
+      this.visible = !this.visible
+      if (this.visible) {
+        // 打开窗口时清除未读角标
+        this.unreadCount = 0
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.global-im {
+  .im-trigger {
+    position: fixed;
+    right: 24px;
+    bottom: 24px;
+    width: 48px;
+    height: 48px;
+    background: #409eff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+    z-index: 2000;
+    transition: all 0.3s;
+    color: white;
+    &:hover {
+      transform: scale(1.05);
+      background: #66b1ff;
+    }
+    &.active {
+      background: #909399;
+    }
+  }
+}
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .message-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    .message-item {
+      display: flex;
+      margin-bottom: 16px;
+      &.self {
+        flex-direction: row-reverse;
+        .content {
+          margin-right: 12px;
+          align-items: flex-end;
+          .text {
+            background: #95ec69;
+          }
+        }
+      }
+      &.other {
+        .content {
+          margin-left: 12px;
+        }
+      }
+      .content {
+        display: flex;
+        flex-direction: column;
+        max-width: 70%;
+        .name {
+          font-size: 12px;
+          color: #999;
+          margin-bottom: 4px;
+        }
+        .text {
+          padding: 8px 12px;
+          background: #f0f0f0;
+          border-radius: 12px;
+          word-break: break-all;
+        }
+        .time {
+          font-size: 10px;
+          color: #ccc;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+  .input-area {
+    padding: 16px;
+    border-top: 1px solid #eee;
+  }
+}
+</style>

src/views/manage/setting/basic/index.vue

@@ -45,7 +45,7 @@
                                             <div class="el-form-item-msg">应用名称</div>
                                         </el-form-item>
                                         <el-form-item label="AppId(应用 APPID)" prop="appid">
-                                            <el-input v-model="sys.appid" clearable placeholder="请输入"></el-input>
+                                            <el-input v-model="sys.appid" show-password clearable placeholder="请输入"></el-input>
                                             <div class="el-form-item-msg"></div>
                                         </el-form-item>
                                         <el-form-item label="AppSecret(应用 Secret)" prop="secret">