Add support for mobile nav (#64)

Co-authored-by: AceDataCloud <office@acedata.cloud>
AceDataCloud · Jul 1, 2024 · 674ffb6 · 674ffb6
1 parent ecd274f
commit 674ffb6
Show file tree

Hide file tree

Showing 154 changed files with 2,426 additions and 1,696 deletions.
diff --git a/change/@acedatacloud-nexior-cfe68c28-d0e4-4b2b-ba80-f513802e1924.json b/change/@acedatacloud-nexior-cfe68c28-d0e4-4b2b-ba80-f513802e1924.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add support for mobile nav",
+  "packageName": "@acedatacloud/nexior",
+  "email": "office@acedata.cloud",
+  "dependentChangeType": "patch"
+}
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
     <title></title>
   </head>
   <body>

diff --git a/src/components/application/Status.vue b/src/components/application/Status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="element">
     <div v-if="initializing && application === undefined">
       <el-skeleton :rows="1" class="text-center">
         <template #template>
@@ -112,7 +112,7 @@ export default defineComponent({
       this.application &&
       !this.application?.credentials?.find((credential) => credential.host === window.location.origin)
     ) {
-      console.log('create extra credential');
+      console.debug('create extra credential');
       this.onCreateCredential(this.application);
     }
   },
@@ -163,6 +163,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.element {
+  margin-bottom: 10px;
+}
 .shimmer {
   width: 300px;
   margin: auto;

diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
@@ -200,6 +200,7 @@ export default defineComponent({
       color: var(--el-text-color-primary);
       width: fit-content;
       text-align: right;
+      max-width: 100%;
       padding: 8px 15px;
     }
   }

diff --git a/src/components/chat/ModelSelector.vue b/src/components/chat/ModelSelector.vue
@@ -141,7 +141,7 @@ export default defineComponent({
   background-color: var(--el-bg-color-page);
   padding: 7px 6px;
   border-radius: 15px;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
   .group {
     padding: 20px 30px;
     color: var(--el-text-color-primary);

diff --git a/src/components/chat/ModelSelector2.vue b/src/components/chat/ModelSelector2.vue
@@ -117,7 +117,7 @@ export default defineComponent({
   cursor: pointer;
   padding: 7px 6px;
   border-radius: 15px;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
   .name {
     font-size: 16px;
     font-weight: bold;

diff --git a/src/components/common/Breadcrumb.vue b/src/components/common/Breadcrumb.vue
@@ -20,9 +20,6 @@ export default defineComponent({
     return {
       items: this.$route.matched
     };
-  },
-  mounted() {
-    console.log('this', this.$route);
   }
 });
 </script>

diff --git a/src/components/common/DarkSelector.vue b/src/components/common/DarkSelector.vue
@@ -1,54 +1,60 @@
 <template>
-  <el-button :class="{ active: !!dark }" @click="setDark(!dark)">
-    <font-awesome-icon v-if="dark" icon="fa-solid fa-moon" />
-    <font-awesome-icon v-else icon="fa-solid fa-moon" />
-  </el-button>
+  <el-dialog :model-value="visible" :width="200" class="text-center" @close="$emit('close')">
+    <dark-switch class="switch" dark-background="#333" light-background="#fff" />
+  </el-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { toggleDark } from 'vue-dark-switch';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { ElButton } from 'element-plus';
+import { getDomain } from '@/utils';
 import { getCookie, setCookie } from 'typescript-cookie';
-import { getDomain } from '@/utils/initializer';
+import { defineComponent } from 'vue';
+import { Switch as DarkSwitch, toggleDark, isDark } from 'vue-dark-switch';
+import { ElDialog } from 'element-plus';
 
 export default defineComponent({
   components: {
-    FontAwesomeIcon,
-    ElButton
+    DarkSwitch,
+    ElDialog
   },
-  emits: ['update:dark'],
-  data() {
-    return {
-      dark: getCookie('THEME') === 'dark'
-    };
+  props: {
+    visible: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['update:dark', 'close'],
+  computed: {
+    dark() {
+      return getCookie('THEME') === 'dark';
+    },
+    switchValue() {
+      return isDark.value;
+    }
   },
   watch: {
+    switchValue(val) {
+      this.setCookie(val);
+    },
     dark(val) {
-      this.setDark(val);
+      document.documentElement.classList.toggle('dark', val);
+      this.setCookie(this.dark);
     }
   },
   mounted() {
-    console.log('mounted', this.dark);
-    this.setDark(this.dark);
+    if (this.dark) {
+      toggleDark(true);
+      document.documentElement.classList.add('dark');
+    } else {
+      toggleDark(false);
+      document.documentElement.classList.remove('dark');
+    }
   },
   methods: {
-    setDark(flag: boolean) {
-      toggleDark(flag);
-      this.setCookie(flag);
-      if (flag === true) {
-        document.documentElement.classList.add('dark');
-      } else if (flag === false) {
-        document.documentElement.classList.remove('dark');
-      }
-    },
     setCookie(isDark: boolean) {
       setCookie('THEME', isDark ? 'dark' : 'light', {
         path: '/',
         domain: getDomain()
       });
-      this.dark = isDark;
     }
   }
 });

diff --git a/src/components/common/HelpEntry.vue b/src/components/common/HelpEntry.vue
@@ -18,7 +18,7 @@
           <font-awesome-icon icon="fa-brands fa-discord" class="mr-2" />
           <template #title>{{ $t('common.message.joinDiscord') }}</template>
         </el-menu-item>
-        <el-popover placement="right" :width="420" trigger="hover">
+        <el-popover :width="350" trigger="hover">
           <template #reference>
             <el-menu-item index="2">
               <font-awesome-icon icon="fa-brands fa-weixin" class="mr-2" />

diff --git a/src/components/common/LocaleSelector.vue b/src/components/common/LocaleSelector.vue
@@ -1,41 +1,40 @@
 <template>
-  <div>
-    <el-dropdown max-height="700" trigger="click" @command="onSelectLocale">
-      <i class="icon">
-        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em">
-          <path
-            fill="currentColor"
-            d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"
-          ></path>
-        </svg>
-      </i>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item v-for="(locale, localeIndex) in locales" :key="localeIndex" :command="locale.value">
-            {{ locale.label }}
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
-  </div>
+  <el-dialog :model-value="visible" :width="300" class="text-center" @close="$emit('close')">
+    <el-select v-model="value" @change="onSelectLocale">
+      <el-option
+        v-for="(locale, localeIndex) in locales"
+        :key="localeIndex"
+        :label="locale.label"
+        :value="locale.value"
+      />
+    </el-select>
+  </el-dialog>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus';
+import { ElDialog, ElSelect, ElOption } from 'element-plus';
 import { SUPPORTED_LOCALES, setI18nLanguage } from '@/i18n';
 import { setCookie } from 'typescript-cookie';
 import { getDomain } from '@/utils/initializer';
 
 export default defineComponent({
   name: 'LocaleSelector',
   components: {
-    ElDropdown,
-    ElDropdownItem,
-    ElDropdownMenu
+    ElDialog,
+    ElSelect,
+    ElOption
   },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['close'],
   data() {
     return {
+      value: this.$i18n.locale,
       locales: SUPPORTED_LOCALES
     };
   },