Merge pull request #3 from sdmu-gaoqi/dev

Dev

.eslintrc.cjs

@@ -48,6 +48,7 @@ module.exports = {
       },
       rules: {
         'no-console': 'off',
+        "vue/no-use-v-if-with-v-for": 'off',
         '@typescript-eslint/no-unused-vars': [
           'error',
           { vars: 'all', args: 'after-used', ignoreRestSiblings: true }

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": false,
-    "source.fixAll.stylelint": false
+    "source.fixAll.eslint": "never",
+    "source.fixAll.stylelint": "never"
   },
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   "typescript.tsdk": "node_modules/typescript/lib"
 }

README.md

@@ -1,3 +1,6 @@
+# 访问地址
+http://111.229.138.125/admin/index.html
+
 # 目录结构
 
 ```
@@ -100,6 +103,8 @@ export type WAMenu = (ItemType & {
 
 1. 需要关联的权限点写在permission中
 2. 需要选中的应用才展示的菜单使用 group 与apps里的key匹配
+3. 菜单名称需要多语言支持的话需要配置在多语言文件中 且格式为 menu.xxxx 其中xxxx是menu数据的name
+4. 不需要多语言只需要配置title就好了 不需要配置name
 
 ---
 
@@ -119,3 +124,8 @@ mock预设为 test 与 prod(根据import.meta.env.MODE 决定 prod模式时 使
 内设了几款插件
 wa-menu 右键 src/locales/lang.xlsx可以 执行xlsx自动转ts的脚本
 wa-language-tip 丰富i18n 在编写时的提示能力
+
+## 关于自适应
+
+默认使用wx作为自适应css单位 可在vite.config.ts的postCssPxToRem配置unit 当css文件使用配置的单位时 会根据html字体大小转成相应的rem
+html 字体大小在 src\style.css 文件设置

mock/prod/index.ts

@@ -0,0 +1,42 @@
+import { MockMethod } from 'vite-plugin-mock'
+
+// @ts-ignore
+const testMock: MockMethod = [
+  {
+    url: '/api/login',
+    method: 'post',
+    timeout: 1000,
+    response: ({ data }: any) => {
+      return {
+        code: 0,
+        data: {
+          token: 'thisIsToken'
+        }
+      }
+    }
+  },
+  {
+    url: '/api/perm',
+    method: 'get',
+    timeout: 1000,
+    response: ({ data }: any) => {
+      console.log('登录请求数据 =>', data)
+      return {
+        code: 0,
+        data: ['perm-1']
+      }
+    }
+  },
+  {
+    url: '/api/logout',
+    method: 'get',
+    timeout: 1000,
+    response: () => {
+      return {
+        code: 0
+      }
+    }
+  }
+]
+
+export default testMock

mock/test/index.ts

@@ -7,7 +7,6 @@ const testMock: MockMethod = [
     method: 'post',
     timeout: 1000,
     response: ({ data }: any) => {
-      console.log('登录请求数据 =>', data)
       return {
         code: 0,
         data: {

package.json

@@ -71,7 +71,7 @@
     "vue-i18n": "^9.9.0",
     "vue-router": "^4.2.4",
     "vuex": "^4.1.0",
-    "wa-utils": "^0.2.6"
+    "wa-utils": "^0.3.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.0.0",

src/App.vue

@@ -8,7 +8,9 @@
       }
     }"
   >
-    <RouterView />
+    <a-style-provider hash-priority="high">
+      <RouterView />
+    </a-style-provider>
   </a-config-provider>
 </template>
 

src/components/layout/layout.vue

@@ -1,94 +1,97 @@
 <template>
   <a-layout>
-    <a-layout-header class="header">
-      <div class="logo" />
-      <!-- App区域 -->
+    <a-layout-sider
+      width="200"
+      style="background: #fff"
+      collapsible
+      collapsedWidth="40"
+    >
+      <!-- 菜单栏区域 -->
       <a-menu
+        mode="inline"
         theme="dark"
-        mode="horizontal"
-        :items="appList"
-        :selectedKeys="[store.state.common.activeGroup]"
-        @click="(v: any) => handleChangeApp(v?.key)"
-        v-if="appList.length > 1"
-      ></a-menu>
-      <div class="ml-auto w-[100px]">
-        <a-dropdown>
-          <template #overlay>
-            <a-menu @click="(v) => changeLang(v.key)">
-              <a-menu-item :key="i.value" v-for="i in langMap">
-                <a>{{ i.label }}</a>
-              </a-menu-item>
-            </a-menu>
-          </template>
-          <a>{{ locale }}</a>
-        </a-dropdown>
-        <a-dropdown>
-          <template #overlay>
-            <a-menu @click="systemLogout">
-              <a-menu-item key="1"> 退出登录 </a-menu-item>
-            </a-menu>
-          </template>
-          <a><Avatar class="avatar ml-[10px]"></Avatar></a
-        ></a-dropdown>
-      </div>
-    </a-layout-header>
-    <a-layout>
-      <a-layout-sider
-        width="200"
-        style="background: #fff"
-        collapsible
-        collapsedWidth="40"
+        :style="{ height: '100%', borderRight: 0 }"
+        @click="handleClickMenu"
+        :selectedKeys="[tab]"
       >
-        <!-- 菜单栏区域 -->
-        <a-menu
-          mode="inline"
-          :style="{ height: '100%', borderRight: 0 }"
-          @click="handleClickMenu"
-          :selectedKeys="[tab]"
-        >
-          <template v-for="item in currentMenus" :key="item.key">
-            <a-sub-menu v-if="item.children && item.children?.length > 0">
-              <template #title>
-                <span>
-                  <img
-                    :src="item.icon"
-                    v-if="item.icon"
-                    class="h-[15px] mr-[5px]"
-                  />
-                  {{ item.title }}
-                </span>
-              </template>
-              <template
+        <img :src="Logo" class="w-[60%] mx-auto my-[10%] block" />
+        <template v-for="item in currentMenus">
+          <a-sub-menu
+            v-if="item.children && item.children?.length > 0"
+            :key="item.key"
+          >
+            <template #title>
+              <span>
+                <img
+                  :src="item.icon"
+                  v-if="item.icon"
+                  class="h-[15px] mr-[5px]"
+                />
+                {{ renderName(item) }}
+              </span>
+            </template>
+            <template v-for="children in item.children">
+              <a-menu-item
                 v-if="item.children && item.children.length > 0"
-                v-for="children in item.children"
                 :key="children.key"
+                >{{ renderName(children) }}</a-menu-item
               >
-                <a-menu-item>{{ children.title }}</a-menu-item>
-              </template>
-            </a-sub-menu>
-            <a-menu-item
-              v-else-if="!item.children || item.children?.length === 0"
-              :key="item.key"
-            >
+            </template>
+          </a-sub-menu>
+          <template v-else-if="!item.children || item.children?.length === 0">
+            <a-menu-item :key="item.key">
               <img
                 :src="item.icon"
                 v-if="item.icon"
                 class="h-[15px] mr-[5px]"
               />
-              {{ item.title }}
+              {{ renderName(item) }}
             </a-menu-item>
           </template>
-        </a-menu>
-      </a-layout-sider>
-      <a-layout style="padding: 0 24px 24px">
-        <!-- <a-breadcrumb style="margin: 16px 0">
-          <a-breadcrumb-item
-            :class="getClass(item.key)"
-            v-for="item in apps"
-            :key="item.key"
-            >{{ item.name }}</a-breadcrumb-item
-          >
-        </a-breadcrumb> -->
+        </template>
+      </a-menu>
+    </a-layout-sider>
+    <a-layout>
+      <a-layout-header class="header flex wa-admin-header">
+        <div class="logo" />
+        <!-- App区域 -->
+        <a-menu
+          mode="horizontal"
+          :items="appList"
+          :selectedKeys="[store.state.common.activeGroup]"
+          @click="(v) => handleChangeApp(v?.key)"
+          v-if="appList.length > 1"
+        ></a-menu>
+        <div class="ml-auto min-w-[100px] flex">
+          <a class="flex mr-[10px]" @click="changeFull">
+            <img :src="fullImg" class="w-[20px]"
+          /></a>
+          <a-dropdown>
+            <template #overlay>
+              <a-menu @click="(v) => changeLang(v.key)">
+                <a-menu-item :key="i.value" v-for="i in langMap">
+                  <a>{{ i.label }}</a>
+                </a-menu-item>
+              </a-menu>
+            </template>
+            <a class="flex items-center text-white"
+              ><img :src="lanSvg" class="w-[20px] h-[20px] mr-[10px]" />{{
+                getLangLable(locale)
+              }}</a
+            >
+          </a-dropdown>
+          <a-dropdown>
+            <template #overlay>
+              <a-menu @click="systemLogout">
+                <a-menu-item key="1"> 退出登录 </a-menu-item>
+              </a-menu>
+            </template>
+            <a class="flex items-center ml-[10px]"
+              ><Avatar class="avatar ml-[10px]"></Avatar></a
+          ></a-dropdown>
+        </div>
+      </a-layout-header>
+      <a-layout>
         <a-layout-content
           :style="{
             background: '#fff',
@@ -110,16 +113,30 @@ import { RouterView, useRoute, useRouter } from 'vue-router'
 import { Avatar } from 'ant-design-vue'
 import { systemLogout } from '@/utils'
 import { useI18n } from 'vue-i18n'
-import { langMap } from '@/constant'
+import { langMap, getLangLable } from '@/constant'
 import { changeLang } from '@/utils/lang'
+import lanSvg from '@/assets/svg/lan.svg'
+import { WAMenu } from '@/types'
+import Logo from '@/assets/image/logo.png'
+import { fullscreen } from 'wa-utils'
+import fullImg from '@/assets/svg/full.svg'
+
 const store = useStore()
-const { locale } = useI18n()
+const { locale, t } = useI18n()
 const router = useRouter()
 const routeData = useRoute()
 
 const path = routeData.path
 const tab = ref(path)
 
+const renderName = (item: WAMenu[0]) => {
+  if (item?.title) {
+    return item.title
+  }
+  const name = `menu.${item.name}`
+  return t(name)
+}
+
 const appList = computed(() => {
   return store.state.common.apps?.map((item) => ({
     key: item.key,
@@ -143,6 +160,16 @@ const handleClickMenu = ({ key }: { key: string }) => {
 const handleChangeApp = (key: string) => {
   store.dispatch('common/changeApp', { data: key })
 }
+
+const changeFull = () => {
+  // @ts-ignore
+  const isFull = fullscreen?.status()
+  if (isFull) {
+    fullscreen.exit()
+    return
+  }
+  fullscreen.to()
+}
 </script>
 <style scoped>
 #components-layout-demo-top-side-2 .logo {
@@ -167,4 +194,11 @@ const handleChangeApp = (key: string) => {
   height: 30px;
   border-radius: 50%;
 }
+
+.wa-admin-header {
+  background: #fff !important;
+  padding-left: 20px !important;
+  padding-right: 20px !important;
+  @apply !shadow-coolGray-200 !shadow-md !mb-[10px];
+}
 </style>