feat: + 新增消息提示 + 修复火狐底部版本不显示的BUG + 优化eslint代码 + 增加文字识别错误提示 + 将原有弹出框修改…

…为消息提示 + 增加API:message

.eslintrc.json

@@ -23,6 +23,21 @@
       2,
       "always"
     ],
+    "max-len": [
+      2,
+      {
+        "code": 120,
+        "tabWidth": 2,
+        "ignoreComments": true,
+        "ignoreStrings": true,
+        "ignoreTemplateLiterals": true,
+        "ignoreRegExpLiterals": true
+      }
+    ],
+    "indent": [
+      "error",
+      2
+    ],
     "vue/multi-word-component-names": "off",
     "space-before-function-paren": "off",
     "func-call-spacing": "off"

README.md

@@ -20,10 +20,4 @@
 -   [赞助名单](https://enncy.github.io/online-course-script/sponsors)
 -   [疑难问答](https://enncy.github.io/online-course-script/FQA)
 -   [更新日志](CHANGELOG.md)
-
-# 交流群
-
--   [OCS 助手交流群](https://qm.qq.com/cgi-bin/qm/qr?k=V33SnmNUa_ITyoe5FjZhR3LrRcoBD8x0&jump_from=webapi) （已满）
--   [OCS 助手交流群（2）](https://qm.qq.com/cgi-bin/qm/qr?k=r2id1kAmyKz8CT77045a1XLUD7g3yIPJ&jump_from=webapi)
--   [OCS 助手交流群（3）](https://qm.qq.com/cgi-bin/qm/qr?k=Y9NXoI1MYzuMaEm3_tvMPY8jPxPCxiCk&jump_from=webapi)
--   [OCS 软件内测群](https://qm.qq.com/cgi-bin/qm/qr?k=yesrH-t4_-pCsn29uRuGRz7ShDLZ16d8&jump_from=webapi)
+

package.json

@@ -12,7 +12,7 @@
     "build:core": "pnpm lint &&  gulp -f ./scripts/build-core.js",
     "build:app": "pnpm lint && pnpm build && gulp -f ./scripts/build-app.js",
     "build": "pnpm lint && gulp -f ./scripts/tsc.js",
-    "lint": "eslint  ./packages --ext .ts,.tsx,.js,.jsx,.vue",
+    "lint": "eslint  ./packages --ext .ts,.tsx,.js,.jsx,.vue --fix",
     "release": "sh ./scripts/release.sh",
     "pub:minor": "npm version minor && pnpm build:core && npm publish",
     "pub:major": "npm version major && pnpm build:core && npm publish",
@@ -63,4 +63,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

packages/core/src/App.vue

@@ -4,6 +4,20 @@
     ref="panel"
     :class="hide ? 'hide' : ''"
   >
+    <div class="alert-container">
+      <template
+        v-for="(item,index) of store.alerts"
+        :key="index"
+      >
+        <Alert
+          :style="{opacity: 1 - (store.alerts.length - 1 - index) * (1/store.alerts.length)}"
+          :type="item.type"
+          :text="item.text"
+          :index="index"
+        />
+      </template>
+    </div>
+
     <template v-if="hide">
       <Tooltip
         :tooltip-style="{transform: 'translate(-36%, -110%)' , textAlign:'center', fontSize: '12px'}"
@@ -13,7 +27,6 @@
           ref="logo"
           class="ocs-icon"
           src="https://cdn.ocs.enncy.cn/logo.png"
-
           @dblclick="hide = false"
           @click="(e) => e.stopPropagation()"
         >
@@ -76,6 +89,7 @@
 <script setup lang="ts">
 import { computed, Ref } from '@vue/reactivity';
 import { nextTick, onMounted, ref, watch } from 'vue';
+import { Alert } from './components/alert';
 import { Tooltip } from './components/Tooltip';
 import { addFunctionEventListener, dragElement, getCurrentPanels } from './core/utils';
 import { definedScripts } from './main';

packages/core/src/assets/less/common.less

@@ -1,15 +1,12 @@
  /**
-
 panel style
-
 */
  #ocs-panel {
      position: fixed;
      top: 40%;
      left: 50%;
-     transform: translate(-50%);
-     max-width: 800px;
-     min-width: 250px;
+     max-width: 400px;
+     min-width: 300px;
      background: white;
      z-index: 99999999;
      border-radius: 4px;
@@ -84,7 +81,7 @@ panel style
 
      // 底部区域
      .ocs-panel-footer {
-         font-size: 1px;
+         font-size: 12px;
          color: #c5c5c5;
          border-top: 1px solid #c6c6c6;
          margin-top: 8px;
@@ -299,19 +296,68 @@ panel style
          padding: 2px 0px;
      }
 
+     // alert 提示父元素
+     .alert-container {
+         margin-bottom: 4px;
+         position: absolute;
+         z-index: 999999;
+         bottom: 100%;
+         left: 50%;
+         width: 100%;
+         transform: translate(-50%, 0px);
+
+         // 关闭按钮
+         .alert-closer {
+             float: right;
+             border-radius: 50%;
+             border: 1px solid;
+             text-align: center;
+             cursor: pointer;
+             font: icon;
+             line-height: 14px;
+             width: 14px;
+         }
+
+         // 提示内容
+         .alert {
+             border-radius: 4px;
+             margin-bottom: 4px;
+             padding: 4px;
+             font-size: 12px;
+
+             &.alert-text {
+                 letter-spacing: 1px;
+             }
+
+             &.error {
+                 background-color: #f9595dc2;
+                 color: white;
+                 border: 1px solid #f36c70;
+             }
+
+             &.info {
+                 background-color: #2196f3a3;
+                 color: white;
+                 border: 1px solid #1890ff;
+             }
+
+             &.success {
+                 background-color: #75d927b0;
+                 color: #fff;
+                 border: 1px solid #6fd91d;
+             }
+
+             &.warn {
+                 background-color: #ffc107db;
+                 color: white;
+                 border: 1px solid #ffc107;
+             }
+         }
 
-     .alert {
-         background-color: #f36c71cc;
-         color: white;
-         border: 1px solid #f36c71cc;
-         border-radius: 4px;
-         padding: 4px;
-         margin-bottom: 8px;
-         position: relative;
-         z-index: 999;
      }
 
 
+
      .hide-tip {
          position: fixed;
          color: white;

packages/core/src/components/Alert.tsx

@@ -0,0 +1,43 @@
+import { defineComponent, PropType, toRefs } from 'vue';
+import { store } from '../main';
+
+export interface AlertType {
+  key: any;
+  type: 'info' | 'success' | 'warn' | 'error';
+  text: string
+}
+
+export const Alert = defineComponent({
+  props: {
+    type: {
+      default: 'info',
+      type: String as PropType<AlertType['type']>
+    },
+    text: {
+      default: '',
+      type: String as PropType<string>
+    },
+    index: {
+      default: 0,
+      type: Number as PropType<number>
+    }
+  },
+  setup(props) {
+    const { type, text, index } = toRefs(props);
+
+    return () => (
+      <div class={['alert', type.value].join(' ')}>
+        <span >{ type.value === 'info' ? 'ℹ️' : type.value === 'error' ? '❗' : type.value === 'success' ? '✅' : type.value === 'warn' ? '⚠️' : '❕' }</span>
+        <div style="display: inline">
+          <span
+            class="alert-closer"
+            onClick={() => (store.alerts.splice(index.value, 1))}>
+              ×
+          </span>
+          <span class="alert-text">{ text.value }</span>
+
+        </div>
+      </div>
+    );
+  }
+});