feat: add fnOS packaging, storage workflows and release pipeline

app/src/App.vue

@@ -16,11 +16,13 @@
     </stepin-view>
   </ThemeProvider>
   <my-personal ref="personalRef" />
+  <MobileTopBar v-if="showMobileNav" @profile="openPersonalSettings" />
+  <MobileBottomNav v-if="showMobileNav" @profile="openPersonalSettings" />
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, computed, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
+import { reactive, ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useAccountStore, useMenuStore, useSettingStore, storeToRefs, useApiStore } from '@/store';
 import avatar from '@/assets/avatar.png';
 import { PageFooter, HeaderActions } from '@/components/layout';
@@ -29,15 +31,34 @@ import { LoginModal } from '@/pages/login';
 import { MyPersonal } from '@/pages/personal';
 import { configTheme, themeList } from '@/theme';
 import { ThemeProvider } from 'stepin';
+import MobileBottomNav from '@/components/layout/MobileBottomNav.vue';
+import MobileTopBar from '@/components/layout/MobileTopBar.vue';
+import { useMobileViewport } from '@/utils/useMobileViewport';
 // logout,profile
 const { logout } = useAccountStore();
 const showPersonalDrawer = ref<boolean>(false);
-const personalRef = ref(null);
+const personalRef = ref<any>(null);
 const emailRef = ref(null);
 const open = ref(false);
 
 const showSetting = ref(false);
 const router = useRouter();
+const route = useRoute();
+const { isMobileViewport } = useMobileViewport();
+const showMobileNav = computed(() =>
+  isMobileViewport.value && !['/login', '/init', '/mobile'].includes(route.path)
+);
+const openPersonalSettings = () => personalRef.value?.show(true);
+
+watch(showMobileNav, (visible) => {
+  document.body.classList.toggle('has-mobile-bottom-nav', visible);
+  document.body.classList.toggle('mobile-app-shell', visible);
+}, { immediate: true });
+
+watch(() => route.fullPath, () => {
+  open.value = false;
+  showSetting.value = false;
+});
 
 // useMenuStore().getMenuList();
 
@@ -88,6 +109,11 @@ onMounted(() => {
       }
     });
 });
+
+onBeforeUnmount(() => {
+  document.body.classList.remove('has-mobile-bottom-nav');
+  document.body.classList.remove('mobile-app-shell');
+});
 </script>
 
 <style lang="less">
@@ -132,6 +158,166 @@ body {
   height: 100vh;
   overflow-y: hidden;
 }
+
+@media (max-width: 768px) {
+  html,
+  body,
+  #stepin-app,
+  .stepin-view {
+    width: 100%;
+    height: var(--app-viewport-height, 100dvh) !important;
+    min-height: 0;
+    overflow: hidden !important;
+  }
+
+  body.mobile-app-shell {
+    --mobile-surface: #f6f7fb;
+    --mobile-card: #fff;
+    --mobile-border: #e9eaf2;
+    --mobile-text: #172033;
+    --mobile-subtext: #667085;
+    --mobile-primary: #722ed1;
+    background: var(--mobile-surface);
+  }
+
+  body.mobile-app-shell .stepin-layout {
+    grid-template-columns: minmax(0, 1fr) !important;
+    grid-template-rows: minmax(0, 1fr) !important;
+  }
+
+  body.mobile-app-shell .stepin-layout-header,
+  body.mobile-app-shell .stepin-layout-side,
+  body.mobile-app-shell .stepin-tabs-view-head,
+  body.mobile-app-shell .stepin-tabs-view-content-footer {
+    display: none !important;
+  }
+
+  body.mobile-app-shell .stepin-layout-content {
+    grid-row: 1 !important;
+    grid-column: 1 !important;
+    height: var(--app-viewport-height, 100dvh);
+    padding-top: calc(54px + env(safe-area-inset-top));
+    padding-bottom: calc(66px + env(safe-area-inset-bottom));
+    background: var(--mobile-surface);
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  body.mobile-app-shell .stepin-view-main,
+  body.mobile-app-shell .stepin-tabs-view,
+  body.mobile-app-shell .stepin-tabs-view-content {
+    height: auto !important;
+    min-height: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  body.mobile-app-shell .stepin-tabs-view-content-main {
+    min-height: 100%;
+    padding: 10px !important;
+    border-radius: 0 !important;
+    background: var(--mobile-surface) !important;
+  }
+
+  body.mobile-app-shell button,
+  body.mobile-app-shell a,
+  body.mobile-app-shell .ant-btn,
+  body.mobile-app-shell .ant-switch,
+  body.mobile-app-shell .ant-checkbox-wrapper,
+  body.mobile-app-shell .ant-radio-wrapper {
+    touch-action: manipulation;
+  }
+
+  body.mobile-app-shell .ant-btn:not(.ant-btn-circle) {
+    min-height: 44px;
+    border-radius: 10px;
+  }
+
+  body.mobile-app-shell .ant-modal,
+  body.mobile-app-shell .ant-drawer-content-wrapper {
+    max-width: 100vw !important;
+  }
+
+  body.mobile-app-shell .ant-drawer-left .ant-drawer-content-wrapper,
+  body.mobile-app-shell .ant-drawer-right .ant-drawer-content-wrapper {
+    width: 100vw !important;
+  }
+
+  body.mobile-app-shell .ant-modal {
+    width: calc(100vw - 20px) !important;
+    min-width: 0 !important;
+    margin: 10px auto;
+    top: max(10px, env(safe-area-inset-top));
+  }
+
+  body.mobile-app-shell .ant-drawer-header {
+    padding-top: max(16px, env(safe-area-inset-top));
+  }
+
+  body.mobile-app-shell .ant-drawer-body {
+    padding-bottom: max(20px, env(safe-area-inset-bottom));
+  }
+
+  body.mobile-app-shell .mobile-full-modal .ant-modal {
+    top: 0 !important;
+    width: 100vw !important;
+    max-width: none !important;
+    height: var(--app-viewport-height, 100dvh);
+    margin: 0;
+    padding: 0;
+  }
+
+  body.mobile-app-shell .mobile-full-modal .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    height: var(--app-viewport-height, 100dvh);
+    border-radius: 0;
+  }
+
+  body.mobile-app-shell .mobile-full-modal .ant-modal-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding-bottom: max(20px, env(safe-area-inset-bottom));
+  }
+}
+
+html.dark-mode body.mobile-app-shell {
+  --mobile-surface: #11121d;
+  --mobile-card: #1a1b2b;
+  --mobile-border: #303247;
+  --mobile-text: rgba(255, 255, 255, 0.9);
+  --mobile-subtext: rgba(255, 255, 255, 0.58);
+}
+
+@media (max-width: 768px) {
+  html.dark-mode body.mobile-app-shell .mobile-task-card,
+  html.dark-mode body.mobile-app-shell .mobile-record-card,
+  html.dark-mode body.mobile-app-shell .mobile-cookie-card,
+  html.dark-mode body.mobile-app-shell .custom-card,
+  html.dark-mode body.mobile-app-shell .query-container--mobile,
+  html.dark-mode body.mobile-app-shell .search-tab-container {
+    border-color: var(--mobile-border) !important;
+    background: var(--mobile-card) !important;
+    color: var(--mobile-text) !important;
+  }
+
+  html.dark-mode body.mobile-app-shell .mobile-record-title,
+  html.dark-mode body.mobile-app-shell .mobile-cookie-header h3,
+  html.dark-mode body.mobile-app-shell .mobile-cookie-paths dd,
+  html.dark-mode body.mobile-app-shell .card-name {
+    color: var(--mobile-text) !important;
+  }
+
+  html.dark-mode body.mobile-app-shell .filter-switch,
+  html.dark-mode body.mobile-app-shell .mobile-filter-trigger,
+  html.dark-mode body.mobile-app-shell .mobile-task-filter-trigger {
+    border-color: var(--mobile-border) !important;
+    background: #242538 !important;
+    color: #c4b5fd !important;
+  }
+}
+
 .stepin-img-checkbox {
   @apply transition-transform;
   &:hover {