fix: 修复各种问题，并且兼容了响应式特性

ocsjs · Apr 11, 2022 · 0c42947 · 0c42947
1 parent 18c5a78
commit 0c42947
Show file tree

Hide file tree

Showing 25 changed files with 358 additions and 254 deletions.
diff --git a/gulpfile.js b/gulpfile.js
diff --git a/package.json b/package.json
@@ -11,8 +11,8 @@
     ],
     "scripts": {
         "webpack": "webpack --config webpack.config.js",
-        "build:core": "pnpm build && gulp --allowEmpty",
-        "build:app": "pnpm build && gulp -f ./scripts/build.js ",
+        "build:core": "gulp -f ./scripts/build-core.js",
+        "build:app": "pnpm build && gulp -f ./scripts/build-app.js",
         "build": "gulp -f ./scripts/tsc.js",
         "pub:patch": "npm version patch && pnpm gulp && npm publish",
         "pub:minor": "npm version minor && pnpm gulp && npm publish",

diff --git a/packages/core/src/assets/css/common.css b/packages/core/src/assets/css/common.css
@@ -8,7 +8,7 @@ panel style
 */
 ocs-panel {
   position: fixed;
-  top: 20%;
+  top: 40%;
   left: 50%;
   transform: translate(-50%);
   max-width: 800px;
@@ -62,6 +62,10 @@ ocs-panel.hide {
   left: 5%;
   top: unset;
 }
+ocs-panel ul {
+  padding: 0;
+  margin: 0;
+}
 .ocs-panel-footer {
   font-size: 1px;
   color: #c5c5c5;
@@ -117,9 +121,9 @@ ocs-panel.hide {
   outline: none;
   border: none;
   border-bottom: 1px solid #e4e4e4;
-  background: #fbfbfb;
-  border-radius: 4px;
-  padding-left: 8px;
+  background: #f5f5f5;
+  padding-left: 2px;
+  text-align: center;
 }
 .ocs-setting-items input:not([type="checkbox"], [type="radio"]) {
   width: 100%;
@@ -196,6 +200,16 @@ ocs-panel.hide {
   left: -12px;
   display: none;
 }
+/** 文字提示 */
+.tooltip {
+  position: absolute;
+  transform: translate(0%, -100%);
+  background: black;
+  color: white;
+  padding: 4px;
+  border-radius: 4px;
+  opacity: 0.8;
+}
 /** bootstrap style */
 .bi-icon {
   font-size: 14px;

diff --git a/packages/core/src/assets/less/common.less b/packages/core/src/assets/less/common.less
@@ -7,7 +7,7 @@ panel style
 */
 ocs-panel {
     position: fixed;
-    top: 20%;
+    top: 40%;
     left: 50%;
     transform: translate(-50%);
     max-width: 800px;
@@ -69,6 +69,11 @@ ocs-panel {
         left: 5%;
         top: unset;
     }
+
+    ul {
+        padding: 0;
+        margin: 0;
+    }
 }
 
 .ocs-panel-footer {
@@ -133,9 +138,9 @@ ocs-panel {
         outline: none;
         border: none;
         border-bottom: 1px solid #e4e4e4;
-        background: #fbfbfb;
-        border-radius: 4px;
-        padding-left: 8px;
+        background: #f5f5f5;
+        padding-left: 2px;
+        text-align: center;
     }
 
     input:not([type="checkbox"], [type="radio"]) {
@@ -232,6 +237,17 @@ ocs-panel {
     display: none;
 }
 
+/** 文字提示 */
+.tooltip {
+    position: absolute;
+    transform: translate(0%, -100%);
+    background: black;
+    color: white;
+    padding: 4px;
+    border-radius: 4px;
+    opacity: 0.8;
+}
+
 /** bootstrap style */
 .bi-icon {
     font-size: 14px;

diff --git a/packages/core/src/components/SearchResults.tsx b/packages/core/src/components/SearchResults.tsx
@@ -1,14 +1,12 @@
-import { computed, defineComponent, h } from "vue";
+import { computed, defineComponent, nextTick, watch } from "vue";
 import { store } from "../script";
 
-import { StringUtils } from "../core/utils";
+import { domSearch, StringUtils } from "../core/utils";
 
 export const SearchResults = defineComponent({
     data() {
         // 判断是否有搜索结果
-        const validResult = computed(() =>
-            store.localStorage.workResults.filter((res) => res.ctx?.elements.title?.[0]?.innerText)
-        );
+        const validResult = computed(() => store.workResults.filter((res) => res.ctx?.elements.title?.[0]?.innerText));
         const hasResult = computed(() => validResult.value.length > 0);
         return { hasResult, validResult };
     },
@@ -18,8 +16,10 @@ export const SearchResults = defineComponent({
             <div id="search-results">
                 {this.hasResult ? (
                     <div>
-                        <div style="text-align:center"> 📢 点击以下任意题目，可以展开查看搜索详情 📢 </div>
-                        <hr></hr>
+                        <div style="text-align:center; padding-bottom: 4px">
+                            📢 点击以下任意题目，可以展开查看搜索详情 📢{" "}
+                        </div>
+                        <hr />
                         {this.validResult.map((res) => {
                             const title = res.ctx?.elements.title?.[0];
 
@@ -39,7 +39,10 @@ export const SearchResults = defineComponent({
                                             <div class="search-results-container">
                                                 <span class="search-results-title">
                                                     <span>题库:</span>
-                                                    <a href={searchResult.homepage ? searchResult.homepage : "#"}>
+                                                    <a
+                                                        href={searchResult.homepage ? searchResult.homepage : "#"}
+                                                        target="_blank"
+                                                    >
                                                         {searchResult.name}
                                                     </a>
                                                     一共有 {searchResult.answers.length} 个答案
@@ -80,6 +83,8 @@ export const SearchResults = defineComponent({
                 ) : (
                     <div class="search-results-empty" style={{ textAlign: "center" }}>
                         没有搜索结果
+                        <br />
+                        如果当前为学习页面，请等待视频，ppt等完成后才会开始自动答题
                     </div>
                 )}
             </div>

diff --git a/packages/core/src/components/Tooltip.tsx b/packages/core/src/components/Tooltip.tsx
@@ -0,0 +1,26 @@
+import { defineComponent } from "vue";
+
+export const Tooltip = defineComponent({
+    props: ["title"],
+    data() {
+        return { show: false };
+    },
+    render() {
+        return (
+            <div style="width: 100%">
+                <span
+                    style={{ display: this.show ? "block" : "none" }}
+                    class="tooltip"
+                    innerHTML={this.$props.title.replace(/\n/g, "<br/>")}
+                ></span>
+                <div
+                    style="width: 100%"
+                    onMouseenter={() => (this.show = true)}
+                    onMouseleave={() => (this.show = false)}
+                >
+                    {this.$slots.default?.()}
+                </div>
+            </div>
+        );
+    },
+});
diff --git a/packages/core/src/components/cx/ExamSettingPanel.tsx b/packages/core/src/components/cx/ExamSettingPanel.tsx
@@ -1,6 +1,7 @@
 import { defineComponent } from "vue";
 import { createWorkerSetting } from "..";
 import { store } from "../../script";
+import { Tooltip } from "../Tooltip";
 
 const settings = store.setting.cx.exam;
 
@@ -10,7 +11,7 @@ export const ExamSettingPanel = defineComponent({
             <div class="ocs-setting-panel">
                 <div class="ocs-setting-items">
                     {createWorkerSetting(
-                        "作业提交",
+                        "考试提交",
                         {
                             selected: "close",
                             options: [
@@ -38,16 +39,17 @@ export const ExamSettingPanel = defineComponent({
 
                     <label>搜题请求超时时间(秒)</label>
                     <div>
-                        <input
-                            type="number"
-                            title="每道题最多做n秒, 超过则跳过此题。"
-                            value={settings.timeout}
-                            min="0"
-                            step="1"
-                            onChange={(e: any) => {
-                                settings.timeout = e.target.valueAsNumber;
-                            }}
-                        />
+                        <Tooltip title="每道题最多做n秒, 超过则跳过此题。">
+                            <input
+                                type="number"
+                                value={settings.timeout}
+                                min="0"
+                                step="1"
+                                onChange={(e: any) => {
+                                    settings.timeout = e.target.valueAsNumber;
+                                }}
+                            />
+                        </Tooltip>
                     </div>
 
                     <label>搜题请求重试次数</label>