feat: add function box button

terasum · Sep 18, 2023 · eb00524 · eb00524
1 parent 7370d20
commit eb00524
Show file tree

Hide file tree

Showing 12 changed files with 607 additions and 210 deletions.
diff --git a/docs/assets/v3-medict-app-index.png b/docs/assets/v3-medict-app-index.png
diff --git a/frontend/package.json b/frontend/package.json
@@ -21,6 +21,7 @@
     "@rollup/plugin-alias": "^5.0.0",
     "@vicons/antd": "^0.12.0",
     "@vicons/fa": "^0.12.0",
+    "@vicons/fluent": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue/compiler-sfc": "^3.3.4",

diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
@@ -1 +1 @@
-df77e44c3bd5aa79ecc3027aa777c0f1
+a4a4cf1bcccbecd9e93f8fc6306287d5
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -33,7 +33,9 @@
     display: block;
     --wails-draggable: drag;
     background: transparent;
-    background-color: #fafafa;
+    // background-color: #fafafa;
+
+    background-color: $theme-top-header-background-color;
   }
   .x-space-provider {
     width: 100%;
@@ -63,25 +65,35 @@ import { ref, reactive } from 'vue';
 import { NConfigProvider, NGlobalStyle } from 'naive-ui';
 import { darkTheme as dark, lightTheme as light } from 'naive-ui';
 import { zhCN, dateZhCN } from 'naive-ui';
-import { GlobalThemeOverrides } from 'naive-ui'
+import { GlobalThemeOverrides } from 'naive-ui';
 
 let isDark = ref(false);
 let theme = reactive(light);
 
-if (isDark.value){
-   theme = dark;
+if (isDark.value) {
+  theme = dark;
 }
 
-  const themeOverrides: GlobalThemeOverrides = {
-    common: {
-      primaryColor: '#326cb8'
-    },
-    Input:{
-      borderFocus: '1px solid #326cb8',
-      borderHover: '1px solid #326cc9',
-    },
-    Button: {
-      textColor: '#FF0000'
-    }
-  }
-</script>
+const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#326cb8',
+  },
+  Input: {
+    borderFocus: '1px solid #326cb8',
+    borderHover: '1px solid #326cc9',
+  },
+  Button: {
+    textColor: '#333',
+    // borderFocus: '1px solid #326cb8',
+    // borderHover: '1px solid #326cc9',
+    textColorHoverPrimary: '#326cb8',
+    textColorPressedPrimary: '#326cb8',
+    textColorFocusPrimary: '#326cb8',
+    border: "none",
+    borderHover: "none",
+    borderPressed: "none",
+    borderFocus: "none",
+    borderDisabled: "none",
+  },
+};
+</script>
diff --git a/frontend/src/apis/apis.ts b/frontend/src/apis/apis.ts
@@ -16,9 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-
-import {Dispatch, ResourceServerAddr} from '../../wailsjs/go/main/App';
-import {model} from "../../wailsjs/go/models"
+import { Dispatch, ResourceServerAddr } from '../../wailsjs/go/main/App';
+import { model } from '../../wailsjs/go/models';
 
 function objectToPathParams(obj) {
   const params = [];
@@ -30,44 +29,24 @@ function objectToPathParams(obj) {
   return params.join('&');
 }
 
-
 export const StaticDictServerURL = function (): Promise<string> {
-  return ResourceServerAddr()
-}
+  if (window['go']) {
+    return ResourceServerAddr();
+  } else {
+    Promise.resolve("http://localhost:1")
+  }
+};
 
-const APIs = async function() {
-  // let baseURL = await (getBaseURL())();
-  // return {
-  //   "GetAllDicts": {method: "GET", path: baseURL + "/__api/v1/dicts/GetAllDicts"},
-  //   "LookupWord":  {method: "GET", path: baseURL + "/__api/v1/dicts/LookupWord"},
-  //   "SearchWord":  {method: "GET", path: baseURL + "/__api/v1/dicts/SearchWord"},
-  //   "LocateWord":  {method: "GET", path: baseURL + "/__api/v1/dicts/LocateWord"},
-  // }
-}
 
 export async function requestBackend(apiName, data): Promise<model.Resp> {
-  return Dispatch(apiName, data)
-
-  // let apis = await APIs()
-  // let api = apis[apiName];
-  // if (!api) {
-  //   return
-  // }
-  // let method = api.method;
-  // let path = api.path;
-  // if (method=== "GET"){
-  //   const queryParams = objectToPathParams(data);
-  //   const fullUrl = `${path}?${queryParams}`;
-  //   return await request.get(fullUrl, {
-  //     url: fullUrl,
-  //     method: "GET",
-  //   })
-  // } else {
-  //   return await request.get(path, {
-  //     url: path,
-  //     method: "GET",
-  //     data: data,
-  //   })
-  // }
+  if (window['go']) {
+    return Dispatch(apiName, data);
+  } else {
+    return Promise.resolve({
+      data: [{id:"1", "name":"test"}],
+      err: "",
+      code: 200,
+    })
 
-}
+  }
+}
diff --git a/frontend/src/store/dict/index.js b/frontend/src/store/dict/index.js
@@ -31,10 +31,12 @@ function constructQueryURL(entry) {
 const countDownJs = `
 <html>
 <head>
+<meta content="width=device-width, initial-scale=1.0" name="viewport" />
 <style>
   html, body {
-     width: 100%;
     height: 100%;
+    padding:0;
+    margin:0;
     user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -98,18 +100,32 @@ export const useDictQueryStore = defineStore('dictQuery', {
       let count = 0;
       let that = this;
       let inv = setInterval(function() {
-        StaticDictServerURL().then((url) => {
+        let urlPromise = StaticDictServerURL();
+
+        if (!urlPromise){
+          clearInterval(inv);
+          return;
+        }
+
+        urlPromise.then((url) => {
           if (url === "") {
             console.log(`[init] static server url empty retry ${count}`)
             return
           }
+          // browser
+          if (url === "http://localhost:1/"){
+            return
+          }
           if (url.startsWith("http://localhost:0/")){
             console.log(`[init] static server url empty retry ${count}`)
             return
           }
           console.log(`[init] static server url success ${count}`)
           that.updateBaseURL(url);
           clearInterval(inv);
+        }).catch((err) =>{
+          console.error(err);
+          clearInterval(inv);
         });
       }, 1000)
     },

diff --git a/frontend/src/style/variables.scss b/frontend/src/style/variables.scss
@@ -17,9 +17,34 @@
  */
 
 $fake-title-bar-height: 26px;
-$layout-header-height: 50px;
+$layout-header-height: 60px;
 $layout-footer-height: 20px;
 $layout-left-sidebar-width: 200px;
 $layout-right-toolbar-width: 60px;
-$layout-main-content-functions-height: 60px;
-$layout-sidebar-logo-height: 60px;
+$layout-sidebar-logo-height: 60px;
+
+
+$theme-logo-font-color: #505050;
+
+// background-color: #fbfbfb;
+/* background-color: #f6f6f6; */
+// background-image: linear-gradient(135deg, #325dff, #529eff);
+// $theme-top-header-background-color: #d84042;
+
+$theme-top-header-background-color: #f4f5f6;
+
+// background-color: #325eff60;
+
+$theme-function-box-font-color: #505050;
+
+// $theme-function-box-hover-bg-color: #c73639;
+// $theme-function-box-hover-font-color: #505050;
+
+$theme-function-box-hover-bg-color: #666;
+$theme-function-box-hover-font-color: #fff;
+
+
+
+// background-color: #e1e1e1;
+// background-color: #325effa6;
+$theme-function-box-active-color: #bd3134;