🐞 fix(前端布局HEADER): 修复前端布局bug

tools/build_out/controllers/app.py

@@ -111,17 +111,16 @@ class AppResource(object):
         return { 'app_name': app.app_name, 'app_path': epk_path }, ResponseCode.HTTP_SUCCESS
 
     def getList(self, params, jwt):
+        # 默认只查询资源包
         user = UserModel.query.filter(UserModel.uuid==jwt.get('uuid')).one_or_none()
         if not user:
             return False, ResponseCode.USER_NOT_EXISTS
 
-        temp = {}
+        temp = { "is_delete": False }
         filters = [AppModel.is_delete==False]
-        if user.role == 1:
-            temp.update({ "is_delete": False })
-        else:
+        if user.role != 1:
             filters.append(AppModel.create_by==user.id)
-            temp.update({ "create_by": user.id, "is_delete": False })
+            temp.update({ "create_by": user.id })
 
         if "scope" in params and params.get("scope") == "list":
             result = AppModel.query.filter_by(**temp).order_by(AppModel.create_at.desc())
@@ -145,7 +144,6 @@ class AppResource(object):
 
         result = AppModel.query.filter_by(**temp).order_by(AppModel.create_at.desc()).paginate(params.get("page", 1), params.get("pageSize", 15), error_out=False)
         # result = AppModel.query.filter(*filters).order_by(AppModel.create_at.desc()).paginate(params.get('page', 1), params.get('pageSize', 15), error_out=False)
-
         if result.total and len(result.items):
             return result, ResponseCode.HTTP_SUCCESS
         return None, ResponseCode.HTTP_NOT_FOUND

tools/frontend/src/components/SettingDrawer/index.js

@@ -2,8 +2,9 @@ import "./index.less";
 import ThemeColor from "./ThemeColor";
 import BlockChecbox from "./BlockChecbox";
 import Vue from 'vue';
-import { Drawer, Modal, Divider, message } from "ant-design-vue";
+import { Drawer, Modal, Divider, Switch, Radio, message } from "ant-design-vue";
 import { mapGetters } from "vuex";
+
 const Body = {
   props: ["title"],
   render: function render() {
@@ -18,6 +19,8 @@ const Body = {
 
 Vue.use(Drawer)
 Vue.use(Modal)
+Vue.use(Switch)
+Vue.use(Radio)
 
 const SettingDrawer = {
   // data: () => ({
@@ -39,18 +42,20 @@ const SettingDrawer = {
         nextState.contentWidth = value === "topmenu" ? "Fixed" : "Fluid";
       }
       else if (key === 'fixedHeader' && !value) {
-          nextState.autoHideHeader = false;
+        nextState.autoHideHeader = false;
       }
       // console.log(this.settings);
       // console.log(nextState);
 
-      this.$store.commit('global/UpdateDefaultSettings', this.s)
-      this.$store.commit('global/UpdateDefaultSettings', nextState)
-      console.log(key);
-      console.log(value);
+      nextState.config = true;
+      this.$store.commit('global/UpdateDefaultSettings', this.settings);
+      this.$store.commit('global/UpdateDefaultSettings', nextState);
       message.loading("正在编译主题！", 3);
-
       this.$store.dispatch("global/defaultSettings", true);
+
+    },
+    onChange(checked) {
+      console.log(`a-switch to ${checked}`);
     },
     togglerContent() {
       this.$parent.collapse = !this.collapse;
@@ -61,7 +66,7 @@ const SettingDrawer = {
     const { primaryColor, layout, navTheme } = this.settings;
     return (
       <Drawer
-        title="我是一个抽屉"
+        title="界面设置"
         placement="right"
         closable={false}
         onClose={this.togglerContent}
@@ -127,7 +132,38 @@ const SettingDrawer = {
           </Body>
 
           <Divider />
-          <p>其它设置</p>
+          <h3 class="setting-title">其它设置</h3>
+          <div class="setting-item">
+            <p>内容区域宽度</p>
+            <a-radio-group size="small" default-value="Fluid" button-style="solid" onChange={(e) => {
+              this.changeSetting("contentWidth", e.target.value);
+            }}>
+              <a-radio-button value="Fluid">
+                流式
+              </a-radio-button>
+              <a-radio-button value="Fixed">
+                固定
+              </a-radio-button>
+            </a-radio-group>
+          </div>
+          <div class="setting-item">
+            <p>固定HEADER</p>
+            <a-switch size="small" default-checked onChange={(e) => {
+                this.changeSetting("fixedHeader", e);
+              }} />
+          </div>
+          <div class="setting-item">
+            <p>自动隐藏HEADER</p>
+            <a-switch size="small" default-checked onChange={(e) => {
+                this.changeSetting("autoHideHeader", e);
+              }} />
+          </div>
+          <div class="setting-item">
+            <p>固定侧边栏</p>
+            <a-switch size="small" default-checked onChange={(e) => {
+                this.changeSetting("fixSiderbar", e);
+              }} />
+          </div>
         </div>
       </Drawer>
     );

tools/frontend/src/components/SettingDrawer/index.less

-@import 'ant-design-vue/lib/style/themes/default.less';
+@import "ant-design-vue/lib/style/themes/default.less";
 
-.setting-drawer{
+.setting-drawer {
+  &.content {
+    min-height: 100%;
+    background: #fff;
+    position: relative;
+  }
 
+  & > h3.setting-title {
+    margin-bottom: 15px;
+  }
 
-&.content {
-  min-height: 100%;
-  background: #fff;
-  position: relative;
-}
+  & > div.setting-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 
-.blockChecbox {
-  display: flex;
-  .item {
-    margin-right: 16px;
-    position: relative;
-    // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
-    border-radius: @border-radius-base;
-    cursor: pointer;
-    img {
-      width: 48px;
+  .blockChecbox {
+    display: flex;
+    .item {
+      margin-right: 16px;
+      position: relative;
+      // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+      border-radius: @border-radius-base;
+      cursor: pointer;
+      img {
+        width: 48px;
+      }
+    }
+    .selectIcon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      padding-top: 15px;
+      padding-left: 24px;
+      height: 100%;
+      color: @primary-color;
+      font-size: 14px;
+      font-weight: bold;
     }
   }
-  .selectIcon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    padding-top: 15px;
-    padding-left: 24px;
-    height: 100%;
-    color: @primary-color;
-    font-size: 14px;
-    font-weight: bold;
-  }
-}
 
-.color_block {
-  width: 38px;
-  height: 22px;
-  margin: 4px;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-right: 12px;
-  display: inline-block;
-  vertical-align: middle;
-}
+  .colorBlock {
+    width: 38px;
+    height: 22px;
+    margin: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 12px;
+    display: inline-block;
+    vertical-align: middle;
+  }
 
-.title {
-  font-size: 14px;
-  color: @heading-color;
-  line-height: 22px;
-  margin-bottom: 12px;
-}
+  .title {
+    font-size: 14px;
+    color: @heading-color;
+    line-height: 22px;
+    margin-bottom: 12px;
+  }
 
-.handle {
-  position: absolute;
-  top: 240px;
-  background: @primary-color;
-  width: 48px;
-  height: 48px;
-  right: 300px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  pointer-events: auto;
-  z-index: 0;
-  text-align: center;
-  font-size: 16px;
-  border-radius: 4px 0 0 4px;
-}
+  .handle {
+    position: absolute;
+    top: 240px;
+    background: @primary-color;
+    width: 48px;
+    height: 48px;
+    right: 300px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    pointer-events: auto;
+    z-index: 0;
+    text-align: center;
+    font-size: 16px;
+    border-radius: 4px 0 0 4px;
+  }
 
-.productionHint {
-  font-size: 12px;
-  margin-top: 16px;
-}
+  .productionHint {
+    font-size: 12px;
+    margin-top: 16px;
+  }
 }

tools/frontend/src/defaultSettings.js

 /*
  * @Author: your name
  * @Date: 2021-07-15 09:33:39
- * @LastEditTime: 2021-07-22 23:16:09
+ * @LastEditTime: 2021-07-23 10:58:39
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \evm-store\tools\frontend\src\defaultSettings.js
@@ -9,9 +9,9 @@
 export default {
     navTheme: 'dark', // theme for nav menu
     primaryColor: '#1890FF', // primary color of ant design
-    layout: 'sidemenu', // nav menu position: sidemenu or topmenu
+    layout: 'topmenu', // nav menu position: sidemenu or topmenu
     contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
-    fixedHeader: false, // sticky header
+    fixedHeader: true, // sticky header
     autoHideHeader: false, // auto hide header
     fixSiderbar: false, // sticky siderbar
     leftMenuTitle: "EVM 应用商店", // 左侧边栏顶部名称

tools/frontend/src/layouts/Header.js

-import './Header.less'
+import "./Header.less";
 import { Layout } from "ant-design-vue";
-import GlobalHeader from '@/components/GlobalHeader';
-import TopNavHeader from '@/components/TopNavHeader';
+import GlobalHeader from "@/components/GlobalHeader";
+import TopNavHeader from "@/components/TopNavHeader";
 import { mapGetters } from "vuex";
 const { Header } = Layout;
 const HeaderView = {
-    props: ['menuData', 'logo'],
-    computed: {
-        ...mapGetters({
-            settings: "global/settings"
-        })
+  props: ["menuData", "logo"],
+  computed: {
+    ...mapGetters({
+      settings: "global/settings",
+      collapsed: "global/getChangeLayoutCollapsed",
+    }),
+    sideMenuWidth() {
+      return this.collapsed ? "80px" : "256px";
     },
-    render() {
-        const { menuData, logo } = this
-        const { layout, navTheme, fixedHeader, leftMenuTitle } = this.settings;
-        const isTop = layout === 'topmenu';
-        const isMobile = false;
+    headerStyle() {
+      const { layout, fixedHeader } = this.settings;
 
-        return (
-            <Header style={{ padding: 0 }} class={fixedHeader ? 'fixedHeader' : ''}>
-                {isTop && !isMobile ? (
-                    // <TopNavHeader
-                    //     theme={navTheme}
-                    //     mode="horizontal"
-                    //     Authorized={Authorized}
-                    //     onCollapse={handleMenuCollapse}
-                    //     onNoticeClear={this.handleNoticeClear}
-                    //     onMenuClick={this.handleMenuClick}
-                    //     onNoticeVisibleChange={this.handleNoticeVisibleChange}
-                    //     {...this.props}
-                    // />
-                    <TopNavHeader
-                        theme={navTheme}
-                        layout={layout}
-                        mode="horizontal"
-                        menuData={menuData}
-                        logo={logo}
-                        title={leftMenuTitle}
-                    />
-                ) : (
-                        // <GlobalHeader
-                        //     onCollapse={handleMenuCollapse}
-                        //     onNoticeClear={this.handleNoticeClear}
-                        //     onMenuClick={this.handleMenuClick}
-                        //     onNoticeVisibleChange={this.handleNoticeVisibleChange}
-                        //     {...this.props}
-                        // />
-                        <GlobalHeader theme={navTheme} layout={layout}/>
-                    )}
-            </Header>
-        );
-    }
-}
+      let width =
+        fixedHeader && layout !== "topmenu"
+          ? `calc(100% - ${this.sideMenuWidth})`
+          : "100%";
+      let position = fixedHeader ? "fixed" : "static";
+      return `width: ${width};position: ${position};top: 0;z-index: 1061;transition: width 0.2s;padding: 0;`;
+    },
+  },
+  render() {
+    const { menuData, logo } = this;
+    const { layout, navTheme, fixedHeader, leftMenuTitle } = this.settings;
+    const isTop = layout === "topmenu";
+    const isMobile = false;
+
+    return (
+      <div>
+        <Header style={this.headerStyle}>
+          {isTop && !isMobile ? (
+            // <TopNavHeader
+            //     theme={navTheme}
+            //     mode="horizontal"
+            //     Authorized={Authorized}
+            //     onCollapse={handleMenuCollapse}
+            //     onNoticeClear={this.handleNoticeClear}
+            //     onMenuClick={this.handleMenuClick}
+            //     onNoticeVisibleChange={this.handleNoticeVisibleChange}
+            //     {...this.props}
+            // />
+            <TopNavHeader
+              theme={navTheme}
+              layout={layout}
+              mode="horizontal"
+              menuData={menuData}
+              logo={logo}
+              title={leftMenuTitle}
+            />
+          ) : (
+            // <GlobalHeader
+            //     onCollapse={handleMenuCollapse}
+            //     onNoticeClear={this.handleNoticeClear}
+            //     onMenuClick={this.handleMenuClick}
+            //     onNoticeVisibleChange={this.handleNoticeVisibleChange}
+            //     {...this.props}
+            // />
+            <GlobalHeader theme={navTheme} layout={layout} />
+          )}
+        </Header>
+        <div v-show={fixedHeader} class="placeholder-element" />
+      </div>
+    );
+  },
+};
 export default HeaderView;

tools/frontend/src/layouts/Header.less

 .fixedHeader {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    // > @zindex-tooltip
-    z-index: 1061;
-    transition: width 0.2s;
-  }
-  
+  position: fixed;
+  top: 0;
+  width: 100%;
+  // > @zindex-tooltip
+  z-index: 1061;
+  transition: width 0.2s;
+}
+
\ No newline at end of file
+.placeholder-element {
+  width: 100%;
+  height: 64px;
+}
\ No newline at end of file

tools/frontend/src/layouts/UserLayout.js

-import './UserLayout.less'
-import logo from '@/assets/app-store.svg';
+import "./UserLayout.less";
+import logo from "@/assets/app-store.svg";
 import { mapGetters } from "vuex";
 const UserLayout = {
   props: {
-    logo: { default: logo, types: String }
+    logo: { default: logo, types: String },
   },
   computed: {
     ...mapGetters({
-        settings: "global/settings"
-    })
-},
+      settings: "global/settings",
+    }),
+  },
   render() {
     const { leftMenuTitle, appSlogan } = this.settings;
 
@@ -19,18 +19,14 @@ const UserLayout = {
           <div class="top">
             <div class="header">
               <img alt="logo" class="logo" src={this.logo} />
-              <span class="title">
-                {leftMenuTitle}
-              </span>
-            </div>
-            <div class="desc">
-              {appSlogan}
+              <span class="title">{leftMenuTitle}</span>
             </div>
+            <div class="desc">{appSlogan}</div>
           </div>
           <router-view />
         </div>
       </div>
-    )
-  }
-}
-export default UserLayout
+    );
+  },
+};
+export default UserLayout;
\ No newline at end of file

tools/frontend/src/locales/zh_CN.js

@@ -66,7 +66,7 @@ export default {
   'app.analysis.day-sales': '今日新增',
   'app.analysis.visits': '打包总数',
   'app.analysis.visits-trend': '访问量趋势',
-  'app.analysis.visits-ranking': '门店访问量排名',
+  'app.analysis.visits-ranking': '开发者打包排名',
   'app.analysis.day-visits': '今日新增',
   'app.analysis.week': '周同比',
   'app.analysis.day': '今日新增',
@@ -74,7 +74,7 @@ export default {
   'app.analysis.conversion-rate': '今日新增',
   'app.analysis.operational-effect': '设备总数',
   'app.analysis.sales-trend': '销售趋势',
-  'app.analysis.sales-ranking': '门店销售额排名',
+  'app.analysis.sales-ranking': '开发者应用排名',
   'app.analysis.all-year': '全年',
   'app.analysis.all-month': '本月',
   'app.analysis.all-week': '本周',
@@ -86,7 +86,7 @@ export default {
   'app.analysis.channel.all': '全部渠道',
   'app.analysis.channel.online': '线上',
   'app.analysis.channel.stores': '门店',
-  'app.analysis.sales': '销售额',
+  'app.analysis.sales': '累计汇总',
   'app.analysis.traffic': '客流量',
   'app.analysis.table.rank': '排名',
   'app.analysis.table.search-keyword': '搜索关键词',

tools/frontend/src/router/index.js

@@ -10,6 +10,10 @@ Vue.use(Router);
 
 const router = new Router({
   routes: [
+    {
+      path: "/login",
+      redirect: "/user/login",
+    },
     // user
     {
       path: "/user",
@@ -171,7 +175,6 @@ const router = new Router({
       path: "/application",
       icon: "shop",
       name: "application",
-      // redirect: '/application/index',
       component: BasicLayout,
       children: [
         { path: "/application", redirect: "/application/index" },

tools/frontend/src/store/modules/global-nav.js

@@ -159,7 +159,6 @@ const state = {
 const actions = {
   ["getMenuNav"]({ commit, state }, config) {
     state.loading = true;
-    console.log(config)
     return new Promise((resolve, reject) => {
       menuNav()
         .then((response) => {

tools/frontend/src/store/modules/global.js

+/*
+ * @Author: your name
+ * @Date: 2021-07-15 09:33:39
+ * @LastEditTime: 2021-07-23 11:59:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \evm-store\tools\frontend\src\store\modules\global.js
+ */
 const state = {
   defaultSettings: {},
   BasicLayoutSpinning: true,
@@ -36,8 +44,8 @@ const mutations = {
     state.ChangeLayoutCollapsed = payload;
   },
   ["UpdateDefaultSettings"](state, payload) {
-    let localSettingsKey = "_settings";
-    if (payload.config === true) {
+    const localSettingsKey = "_settings";
+    if (payload.config && payload.config === true) {
       window.localStorage.setItem(
         localSettingsKey,
         JSON.stringify(state.defaultSettings)

tools/frontend/src/views/Application/Index.vue

@@ -218,7 +218,7 @@
             <p :style="[sya, syb]">
               <a-avatar :src="record.app_icon" shape="square" :size="128" />
             </p>
-            <p :style="[sya]">Personal</p>
+            <p :style="[sya]">详细信息</p>
             <a-row>
               <a-col :span="6">
                 <a-description-item
@@ -247,7 +247,7 @@
             </a-row>
             <a-row>
               <a-col :span="6">
-                <a-description-item title="Country" :content="record.nat" />
+                <a-description-item title="启动页" :content="record.launcher" />
               </a-col>
               <a-col :span="6">
                 <a-description-item

tools/frontend/src/views/Dashboard/Analysis.vue

@@ -28,11 +28,11 @@
           />
           <a-trend flag="up" :style="{ marginRight: '16px' }">
             {{ $t("app.analysis.week") }}
-            <span class="trendText">12%</span>
+            <span class="trendText">0%</span>
           </a-trend>
           <a-trend flag="down">
             {{ $t("app.analysis.day") }}
-            <span class="trendText">11%</span>
+            <span class="trendText">0%</span>
           </a-trend>
         </a-chart-card>
       </a-col>
@@ -64,11 +64,11 @@
           <!-- <a-mini-area color="#975FE4" /> -->
           <a-trend flag="up" :style="{ marginRight: '16px' }">
             {{ $t("app.analysis.week") }}
-            <span class="trendText">6%</span>
+            <span class="trendText">0%</span>
           </a-trend>
           <a-trend flag="down">
             {{ $t("app.analysis.day") }}
-            <span class="trendText">2%</span>
+            <span class="trendText">0%</span>
           </a-trend>
         </a-chart-card>
       </a-col>
@@ -181,23 +181,23 @@
                   <a-row>
                     <a-col :md="6" :sm="12" :xs="24">
                       <a-number-info
-                        subTitle="今日交易总额"
-                        suffix="万元"
-                        :total="numeral(12233).format('0,0')"
+                        subTitle="今日访问"
+                        suffix="次"
+                        :total="numeral(0).format('0,0')"
                       />
                     </a-col>
                     <a-col :md="6" :sm="12" :xs="24">
-                      <a-number-info subTitle="销售目标完成率" total="92%" />
+                      <a-number-info subTitle="未定义指标" total="0%" />
                     </a-col>
                     <a-col :md="6" :sm="12" :xs="24">
                       <!-- <NumberInfo subTitle="活动剩余时间" total={<CountDown target={targetTime} />} /> -->
-                      <a-number-info subTitle="活动剩余时间" total="01:04:53" />
+                      <a-number-info subTitle="最新下载时间" total="00:00:00" />
                     </a-col>
                     <a-col :md="6" :sm="12" :xs="24">
                       <a-number-info
-                        subTitle="每秒交易总额"
-                        suffix="元"
-                        :total="numeral(21234).format('0,0')"
+                        subTitle="每秒访问"
+                        suffix="次"
+                        :total="numeral(0).format('0,0')"
                       />
                     </a-col>
                   </a-row>
@@ -225,7 +225,7 @@
                         {{ i + 1 }}
                       </span>
                       <span class="rankingItemTitle">
-                        中国 🇨🇳 加油 ⛽️ ⛽ ️⛽️
+                        暂无数据 ⛽️ ⛽ ️⛽️
                       </span>
                       <span class="rankingItemValue"> 0,0 </span>
                     </li>

tools/frontend/vue.config.js

 /*
  * @Author: your name
  * @Date: 2021-07-15 09:33:39
- * @LastEditTime: 2021-07-22 03:35:46
+ * @LastEditTime: 2021-07-23 10:28:29
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \evm-store\tools\frontend\vue.config.js
@@ -32,7 +32,7 @@ module.exports = {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       "/api/v1": {
-        target: "http://127.0.0.1:3000/",
+        target: "http://lab.wanliwuhan.com/",
         changeOrigin: true,
         pathRewrite: {},
       },