[update] MathFX SLatexOCR API, and update MathFX styles.

package.json

@@ -39,7 +39,7 @@
         "lowdb": "^1.0.0",
         "npm-check": "^5.9.2",
         "sass-loader": "^8.0.2",
-        "vfluentdesign": "^0.4.6",
+        "vfluentdesign": "^1.2.39",
         "vue": "^2.6.11",
         "vue-axios": "^3.2.4",
         "vue-router": "^3.4.9",

src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="app" :class="{dark: theme == 'dark'}">
-        <fv-navigation-view v-model="navigationValue" :theme="theme" class="navigation-view" :options="navigationOptions" :background="navigationViewBackground" expandMode="flyout" fullSizeDisplay="0" :title="'MathFX'" :settingTitle="local('Setting')" ref="nav" @item-click="Go($event.url)" @back="$Back()" @setting-click="Go(`/settings`)"></fv-navigation-view>
+        <fv-navigation-view v-model="navigationValue" :theme="theme" class="navigation-view" :options="navigationOptions" :background="navigationViewBackground" expandMode="flyout" fullSizeDisplay="0" :title="'MathFX'" :show-search="false" :settingTitle="local('Setting')" ref="nav" @item-click="Go($event.url)" @back="$Back()" @setting-click="Go(`/settings`)"></fv-navigation-view>
         <div class="addition-container">
             <title-bar class="title-bar" :theme="theme" style="background: transparent;"></title-bar>
             <div class="global-container">
@@ -188,13 +188,24 @@ export default {
 
     &.dark
     {
-        background: rgba(36, 36, 36, 1);
+        background: linear-gradient(
+            150deg,
+            rgba(17, 34, 46, 1),
+            rgba(0, 0, 0, 1),
+            rgba(0, 0, 0, 1),
+            rgba(0, 0, 0, 1)
+        );
     }
 
     .navigation-view
     {
         height: 100%;
         z-index: 11;
+
+        .fv-light-AnimatedIcon
+        {
+            overflow: hidden;
+        }
     }
 
     .addition-container

src/components/history/list.vue

@@ -34,7 +34,8 @@
                     </fv-button>
                     <fv-button
                         :theme="theme"
-                        fontSize="16"
+                        foreground="white"
+                        background="rgba(27, 96, 147, 1)"
                         borderRadius="50"
                         style="width: 40px; height: 40px;"
                         title="Copy Microsoft© Word"
@@ -110,11 +111,12 @@ export default {
     position: relative;
     width: 100%;
     height: 100%;
-    padding: 0px 15px;
+    padding: 0px 5px;
     box-sizing: border-box;
     grid-template-columns: repeat(auto-fill, minmax(200px, 370px));
     grid-template-rows: repeat(auto-fill, 150px);
-    row-gap: 15px;
+    row-gap: 10px;
+    column-gap: 5px;
     display: grid;
     overflow: auto;
     transition: all 0.2s;
@@ -124,6 +126,14 @@ export default {
             background: rgba(56, 56, 63, 1);
             color: whitesmoke;
 
+            &:hover {
+                border: rgba(118, 185, 237, 0.3) solid 2px;
+            }
+
+            &.choosen {
+                border: rgba(118, 185, 237, 0.6) solid 2px;
+            }
+
             .s-control-block {
                 background: rgba(56, 56, 63, 0.8);
             }
@@ -136,7 +146,7 @@ export default {
 
     .s-history-block {
         position: relative;
-        width: calc(100% - 30px);
+        width: 100%;
         min-height: 150px;
         height: 150px;
         margin-bottom: 15px;
@@ -150,31 +160,31 @@ export default {
         transition: all 0.3s;
 
         &:hover {
-            border: rgba(6, 107, 150, 0.3) solid 2px;
+            border: rgba(0, 90, 158, 0.3) solid 2px;
 
             .s-control-block {
                 display: flex;
             }
         }
 
         &.choosen {
-            border: rgba(6, 107, 150, 0.6) solid 2px;
+            border: rgba(0, 90, 158, 0.6) solid 2px;
         }
 
         .bg-top {
             position: absolute;
             left: 0px;
             top: 0px;
             width: 100%;
-            height: 80%;
+            height: 50%;
         }
 
         .bg-bottom {
             position: absolute;
             left: 0px;
             bottom: 0px;
             width: 100%;
-            height: 20%;
+            height: 50%;
         }
 
         .s-control-block {

src/components/home/displayer.vue

@@ -1,24 +1,29 @@
 <template>
-    <div class="displayer-container" :class="[theme]">
+    <div
+        class="displayer-container"
+        :class="[theme]"
+    >
         <div class="img-block">
-            <transition
-                :name="show.src ? 'move-top-to-bottom' : 'move-bottom-to-top'"
-            >
+            <transition :name="show.src ? 'move-top-to-bottom' : 'move-bottom-to-top'">
                 <fv-img
                     v-show="show.src"
                     class="ori-img-box"
                     :src="value.src"
                 ></fv-img>
             </transition>
             <div class="svg-img-block">
-                <fv-img class="img-box" :src="value.svg"></fv-img>
+                <fv-img
+                    class="img-box"
+                    :src="value.svg"
+                ></fv-img>
             </div>
             <div class="s-1">
                 <fv-button
                     :theme="theme"
                     fontSize="12"
+                    :background="theme === 'dark' ? 'rgba(20, 20, 20, 1)': ''"
                     borderRadius="50"
-                    borderWidth="2"
+                    :is-box-shadow="true"
                     style="height: 20px"
                     @click="show.src = !show.src"
                 >
@@ -32,14 +37,26 @@
                     ></i>
                 </fv-button>
             </div>
-            <img v-show="false" :src="value.svg" alt="" ref="svg" />
-            <img v-show="false" :src="value.png" alt="" ref="png" />
+            <img
+                v-show="false"
+                :src="value.svg"
+                alt=""
+                ref="svg"
+            />
+            <img
+                v-show="false"
+                :src="value.png"
+                alt=""
+                ref="png"
+            />
         </div>
         <div class="op-box">
             <div class="left-block">
                 <fv-button
                     :theme="theme"
                     fontSize="16"
+                    foreground="white"
+                    background="rgba(27, 96, 147, 1)"
                     borderRadius="50"
                     borderWidth="2"
                     style="width: 40px; height: 40px"
@@ -74,33 +91,33 @@
                 </fv-button>
             </div>
         </div>
-        <div class="math-box" v-if="value.latex_bare">
+        <div
+            class="math-box"
+            v-if="value.latex_bare"
+        >
             <div
                 class="item-block"
                 v-for="(item, index) in fomulate"
                 :key="index"
             >
                 <fv-text-box
                     :theme="theme"
-                    :background="theme === 'dark' ? 'rgba(36, 36, 36, 1)': ''"
-                    borderRadius="3"
-                    :borderWidth="2"
+                    :background="theme === 'dark' ? 'rgba(0, 0, 0, 1)': ''"
+                    borderRadius="12"
                     :revealBorder="true"
-                    :isBoxShadow="true"
                     class="item-input"
                     readonly
                     :value="item"
+                    :title="item"
                 ></fv-text-box>
                 <fv-button
                     :theme="theme"
-                    :background="theme === 'dark' ? 'rgba(36, 36, 36, 1)': ''"
-                    borderRadius="3"
-                    :borderWidth="2"
+                    :background="theme === 'dark' ? 'rgba(12, 12, 12, 1)': ''"
+                    borderRadius="12"
                     :isBoxShadow="true"
                     class="item-button"
                     @click="copy_text(item)"
-                    ><i class="ms-Icon ms-Icon--Copy"></i
-                ></fv-button>
+                ><i class="ms-Icon ms-Icon--Copy"></i></fv-button>
             </div>
         </div>
     </div>
@@ -131,9 +148,7 @@ export default {
     mounted() {},
     beforeDestroy() {},
     computed: {
-        ...mapGetters([
-            'local'
-        ]),
+        ...mapGetters(["local"]),
         fomulate() {
             return [
                 this.value.latex_bare,
@@ -154,7 +169,7 @@ export default {
             cas.height = el.height;
             ctx.drawImage(el, 0, 0);
             let imgData = ctx.getImageData(0, 0, el.width, el.height);
-            let data = imgData.data
+            let data = imgData.data;
             for (let i = 0; i < data.length; i += 4) {
                 if (data[i + 3] < 255) {
                     data[i] = 255 - data[i];
@@ -163,12 +178,12 @@ export default {
                     data[i + 3] = 255 - data[i + 3];
                 }
             }
-            ctx.putImageData(imgData,0,0)
+            ctx.putImageData(imgData, 0, 0);
             let img = nativeImage.createFromDataURL(cas.toDataURL("image/png"));
             img = nativeImage.createFromBuffer(img.toPNG());
             if (!img.isEmpty()) clipboard.writeImage(img);
             else {
-                this.$barWarning(`${this.local('Empty image content')}`, {
+                this.$barWarning(`${this.local("Empty image content")}`, {
                     status: "error",
                 });
             }
@@ -207,22 +222,15 @@ export default {
     position: relative;
     width: 100%;
     height: 100%;
-    background: whitesmoke;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 
     &.dark {
         color: white;
-        background: rgba(36, 36, 45, 1);
 
-        .img-block
-        {
-            background: rgba(0, 0, 0, 1);
-            box-shadow: 0px 3px 8px rgba(120, 120, 120, 0.1);
-
-            img
-            {
+        .img-block {
+            img {
                 filter: invert(1);
             }
         }
@@ -232,9 +240,8 @@ export default {
         position: relative;
         width: 100%;
         height: auto;
-        background: white;
         overflow: auto;
-        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
+        box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
         transition: all 0.3s;
 
         .s-1 {
@@ -297,32 +304,36 @@ export default {
         width: 100%;
         min-height: 230px;
         height: auto;
-        padding: 0px 15px;
+        padding: 15px;
         flex: 1;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        justify-content: center;
+        justify-content: flex-start;
         align-items: center;
         overflow: auto;
 
         .item-block {
             position: relative;
             width: 100%;
             min-height: 50px;
-            height: 50px;
+            height: 60px;
             display: flex;
             align-items: center;
 
             .item-input {
                 height: 45px;
                 flex: 1;
+
+                * {
+                    font-family: "Cambria Math", "Times New Roman";
+                }
             }
 
             .item-button {
                 width: 45px;
                 height: 45px;
-                margin-left: 15px;
+                margin-left: 5px;
             }
         }
     }

src/js/data_sample.js

@@ -1,6 +1,14 @@
 export default {
     init_status: true,
     subscriptions: [
+        {
+            name: 'sLatexOCR',
+            title: 'sLatex OCR API',
+            data: [
+                { name: 'Url', key: 'url', value: '' },
+                { name: 'API Key', key: 'api_key', value: '' }
+            ]
+        },
         {
             name: 'mathpix',
             title: 'MathPix API(Recommend)',

src/js/datastore.js

@@ -11,6 +11,8 @@ const STORE_PATH = APP.getPath('userData') // 获取electron应用的用户目
 
 const adapter = new FileSync(path.join(STORE_PATH, '/data.json')) // 初始化lowdb读写的json文件名以及存储路径
 
+console.log(STORE_PATH)
+
 const db = Datastore(adapter) // lowdb接管该文件
 
 init_db_file();

src/main.js

@@ -18,6 +18,7 @@ catch {
 import db from '@/js/datastore.js'
 
 import Vue from 'vue'
+import Vuex from 'vuex'
 import App from './App.vue'
 
 import router from "@/router";
@@ -31,7 +32,7 @@ import VueAxios from 'vue-axios'
 
 Vue.use(VueAxios, axios)
 
-Vue.use(VueFluent);
+Vue.use(VueFluent, Vuex);
 
 Vue.config.productionTip = false