fix(core): 因全局变量删除，且需要封装 store 中多个变量的处理，以及防止变量污染，新增了 useContext 和 use…

…Settings 的API，相应涉及代码同步更新。
ocsjs · May 30, 2022 · 6d9fa51 · 6d9fa51
1 parent c74195d
commit 6d9fa51
Show file tree

Hide file tree

Showing 20 changed files with 444 additions and 361 deletions.
diff --git a/packages/core/src/App.vue b/packages/core/src/App.vue
@@ -6,11 +6,11 @@
   >
     <div class="alert-container">
       <template
-        v-for="(item,index) of store.alerts"
+        v-for="(item,index) of ctx.common.alerts"
         :key="index"
       >
         <Alert
-          :style="{opacity: 1 - (store.alerts.length - 1 - index) * (1/store.alerts.length)}"
+          :style="{opacity: 1 - (ctx.common.alerts.length - 1 - index) * (1/ctx.common.alerts.length)}"
           :type="item.type"
           :text="item.text"
           :index="index"
@@ -21,7 +21,7 @@
     <template v-if="hide">
       <Tooltip
         :tooltip-style="{transform: 'translate(-36%, -110%)' , textAlign:'center', fontSize: '12px'}"
-        :title="`OCS 网课助手 ${store.VERSION}<br>单击拖动<br>双击展开<br>连续按下ocs三个键可复原位置<br>想要完全隐藏可移出屏幕`"
+        :title="`OCS 网课助手 ${useStore('VERSION')}<br>单击拖动<br>双击展开<br>连续按下ocs三个键可复原位置<br>想要完全隐藏可移出屏幕`"
       >
         <img
           ref="logo"
@@ -80,7 +80,7 @@
           class="hide-btn"
           @click="hide = true"
         > 点击缩小 </span>
-        <span> OCS 网课助手 {{ store.VERSION }} </span>
+        <span> OCS 网课助手 {{ useStore('VERSION') }} </span>
       </div>
     </template>
   </div>
@@ -93,11 +93,15 @@ import { Alert } from './components/alert';
 import { Tooltip } from './components/Tooltip';
 import { addFunctionEventListener, dragElement, getCurrentPanels } from './core/utils';
 import { definedScripts } from './main';
-import { store } from './store';
+import { useContext, useStore } from './store';
+
+const ctx = useContext();
+
+const local = useStore('localStorage');
 
 const panels = ref(getCurrentPanels(definedScripts));
 
-const hide = ref(store.localStorage.hide);
+const hide = ref(local.hide);
 
 /**
  * 对面板进行处理
@@ -137,7 +141,7 @@ watch(currentPanels, () => {
 });
 
 watch(hide, () => {
-  store.localStorage.hide = hide.value;
+  local.hide = hide.value;
   nextTick(() => {
     enablePanelDrag();
   });
@@ -148,7 +152,7 @@ onMounted(() => {
     listenResetEvent();
     enablePanelDrag();
     listenHistoryChange();
-    let { x, y } = store.localStorage.position;
+    let { x, y } = local.position;
     // 设置初始位置
     if (panel.value && x && y) {
       // 判断移动后的坐标是否超出了屏幕，如果超出则重置为初始位置
@@ -178,7 +182,7 @@ onMounted(() => {
  * 启用面板拖拽
  */
 function enablePanelDrag() {
-  if (panel.value && store.startOptions?.draggable) {
+  if (panel.value && ctx.common.startOptions?.draggable) {
     if (logo.value) {
       dragElement(logo.value, panel.value, onMove);
     }
@@ -190,8 +194,8 @@ function enablePanelDrag() {
 }
 
 function onMove(x: number, y: number) {
-  store.localStorage.position.x = x;
-  store.localStorage.position.y = y;
+  local.position.x = x;
+  local.position.y = y;
 }
 
 /**

diff --git a/packages/core/src/components/Alert.tsx b/packages/core/src/components/Alert.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, PropType, toRefs } from 'vue';
-import { store } from '../main';
+import { useContext } from '../store';
 
 export interface AlertType {
   key: any;
@@ -24,14 +24,15 @@ export const Alert = defineComponent({
   },
   setup(props) {
     const { type, text, index } = toRefs(props);
+    const { common } = useContext();
 
     return () => (
       <div class={['alert', type.value].join(' ')}>
         <span style="text-shadow: 0 0 BLACK;">{ 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))}>
+            onClick={() => (common.alerts.splice(index.value, 1))}>
               ×
           </span>
           <span class="alert-text">{ text.value }</span>

diff --git a/packages/core/src/components/Terminal.tsx b/packages/core/src/components/Terminal.tsx
@@ -1,16 +1,18 @@
 import { defineComponent, nextTick, onMounted, watch } from 'vue';
 
 import { domSearch } from '../core/utils';
-import { store } from '../store';
+import { useStore } from '../store';
 
 export const Terminal = defineComponent({
   setup () {
+    const local = useStore('localStorage');
+
     onMounted(() => {
       // 控制台元素
       const { terminal } = domSearch({ terminal: '.terminal' });
       // 监听改变，并且滚动到最下方
       watch(
-        () => store.localStorage.logs,
+        () => local.logs,
         // eslint-disable-next-line vue/valid-next-tick
         () => nextTick(() => scroll())
       );
@@ -29,7 +31,7 @@ export const Terminal = defineComponent({
 
     return () => (
       <div class="terminal">
-        {store.localStorage.logs.map((log: any) => (
+        {local.logs.map((log: any) => (
           <div>
             <span style={{ color: 'gray' }}>{new Date(log.time).toLocaleTimeString('zh-CN')}</span>
             <span> </span>

diff --git a/packages/core/src/components/cx/CommonWorkSettingPanel.tsx b/packages/core/src/components/cx/CommonWorkSettingPanel.tsx
@@ -1,117 +1,100 @@
 import { defineComponent, PropType, toRefs } from 'vue';
-import { createWorkerSetting } from '..';
-import { store } from '../../main';
+
 import { CommonWorkSetting } from '../../scripts';
+import { useSettings } from '../../store';
 import { Tooltip } from '../Tooltip';
 
 export const CommonWorkSettingPanel = defineComponent({
   props: {
     settings: {
       default: () => {},
       type: Object as PropType<CommonWorkSetting>
-    },
-    upload: {
-      default: () => 'close',
-      type: String as PropType<string>
     }
 
   },
+
   setup (props, { slots }) {
-    const { settings, upload } = toRefs(props);
+    const { settings } = toRefs(props);
+
+    const commonSettings = useSettings().cx.common;
 
     return () => (
       <>
-        {slots.upload
-          ? slots.upload()
-          : (
-            createWorkerSetting(
-              '自动答题',
+
+        {slots.upload?.()}
+
+        <label>繁体字识别模式</label>
+        <div>
+          <Tooltip title="繁体/加密/乱码字识别功能，默认推荐-字典匹配识别\n如果字体匹配识别用不了，可以切换到OCR文字识别。">
+            <select onChange={(e:any) => (commonSettings.recognize = e.target.value)}>
               {
-                selected: upload.value
-              },
-              (e: any) => (upload.value = e.target.value)
-            )
-          )}
+                [['map', '字典匹配识别-推荐'], ['ocr', 'OCR文字识别'], ['close', '关闭繁体字识别']]
+                  .map((item) =>
+                    <option
+                      value={item[0]}
+                      selected={ commonSettings.recognize === item[0] }>
+                      {item[1]}
+                    </option>
+                  )
+              }
+            </select>
+          </Tooltip>
+        </div>
 
-        {
-          upload.value === 'close'
-            ? null
-            : (
-              <>
-                <label>繁体字识别模式</label>
-                <div>
-                  <Tooltip title="繁体/加密/乱码字识别功能，默认推荐-字典匹配识别\n如果字体匹配识别用不了，可以切换到OCR文字识别。">
-                    <select onChange={(e:any) => (store.setting.cx.common.recognize = e.target.value)}>
-                      {
-                        [['map', '字典匹配识别-推荐'], ['ocr', 'OCR文字识别'], ['close', '关闭繁体字识别']]
-                          .map((item) =>
-                            <option
-                              value={item[0]}
-                              selected={ store.setting.cx.common.recognize === item[0] }>
-                              {item[1]}
-                            </option>
-                          )
-                      }
-                    </select>
-                  </Tooltip>
-                </div>
+        <label>答题间隔(秒)</label>
+        <div>
+          <input
+            type="number"
+            value={settings.value.period}
+            min="3"
+            step="1"
+            onChange={(e: any) => (settings.value.period = e.target.valueAsNumber)}
+            onInput={(e: any) => (settings.value.period = e.target.valueAsNumber)}
+          />
+        </div>
 
-                <label>答题间隔(秒)</label>
-                <div>
-                  <input
-                    type="number"
-                    value={settings.value.period}
-                    min="3"
-                    step="1"
-                    onChange={(e: any) => (settings.value.period = e.target.valueAsNumber)}
-                    onInput={(e: any) => (settings.value.period = e.target.valueAsNumber)}
-                  />
-                </div>
+        <label>搜题请求超时时间(秒)</label>
+        <div>
+          <Tooltip title="每道题最多做n秒, 超过则跳过此题。">
+            <input
+              type="number"
+              value={settings.value.timeout}
+              min="0"
+              step="1"
+              onChange={(e: any) => (settings.value.timeout = e.target.valueAsNumber)}
+              onInput={(e: any) => (settings.value.timeout = e.target.valueAsNumber)}
+            />
+          </Tooltip>
+        </div>
 
-                <label>搜题请求超时时间(秒)</label>
-                <div>
-                  <Tooltip title="每道题最多做n秒, 超过则跳过此题。">
-                    <input
-                      type="number"
-                      value={settings.value.timeout}
-                      min="0"
-                      step="1"
-                      onChange={(e: any) => (settings.value.timeout = e.target.valueAsNumber)}
-                      onInput={(e: any) => (settings.value.timeout = e.target.valueAsNumber)}
-                    />
-                  </Tooltip>
-                </div>
+        <label>搜题超时重试次数</label>
+        <div>
+          <input
+            type="number"
+            value={settings.value.retry}
+            min="0"
+            max="2"
+            step="1"
+            onChange={(e: any) => (settings.value.retry = e.target.valueAsNumber)}
+            onInput={(e: any) => (settings.value.retry = e.target.valueAsNumber)}
+          />
+        </div>
 
-                <label>搜题超时重试次数</label>
-                <div>
-                  <input
-                    type="number"
-                    value={settings.value.retry}
-                    min="0"
-                    max="2"
-                    step="1"
-                    onChange={(e: any) => (settings.value.retry = e.target.valueAsNumber)}
-                    onInput={(e: any) => (settings.value.retry = e.target.valueAsNumber)}
-                  />
-                </div>
-                <label>答题完成后等待(秒)</label>
-                <div>
-                  <Tooltip title="自动答题完成后的等待时间, 可适当延长方便对题目检查或者使用第三方工具答题。">
-                    <input
-                      type="number"
-                      value={settings.value.waitForCheck}
-                      min="5"
-                      step="1"
-                      onChange={(e: any) => (settings.value.waitForCheck = e.target.valueAsNumber)}
-                      onInput={(e: any) => (settings.value.waitForCheck = e.target.valueAsNumber)}
-                    />
-                  </Tooltip>
-                </div>
+        {slots.extra?.()}
 
-                {slots.extra?.()}
-              </>
-            )
-        }
+        <label>答题完成后等待(秒)</label>
+        <div>
+          <Tooltip title="自动答题完成后的等待时间, 可适当延长方便对题目检查或者使用第三方工具答题。">
+            <input
+              type="number"
+              value={settings.value.waitForCheck}
+              min="5"
+              step="1"
+              onChange={(e: any) => (settings.value.waitForCheck = e.target.valueAsNumber)}
+              onInput={(e: any) => (settings.value.waitForCheck = e.target.valueAsNumber)}
+            />
+          </Tooltip>
+        </div>
 
       </>
 

diff --git a/packages/core/src/components/cx/ExamSettingPanel.tsx b/packages/core/src/components/cx/ExamSettingPanel.tsx
@@ -1,18 +1,18 @@
 import { defineComponent } from 'vue';
 import { createWorkerSetting } from '..';
-import { store } from '../../store';
+import { useSettings } from '../../store';
+
 import { CommonWorkSettingPanel } from './CommonWorkSettingPanel';
 
 export const ExamSettingPanel = defineComponent({
   setup () {
-    const settings = store.setting.cx.exam;
+    const settings = useSettings().cx.exam;
 
     return () => (
       <div class="ocs-setting-panel">
         <div class="ocs-setting-items">
           <CommonWorkSettingPanel
             settings={settings}
-            upload={settings.upload}
             v-slots={{
               upload: createWorkerSetting(
                 '自动答题',
@@ -21,7 +21,7 @@ export const ExamSettingPanel = defineComponent({
                   options: [
                     {
                       label: '请自行检查后自行点击提交',
-                      value: 'other'
+                      value: 'close'
                     }
                   ]
                 },