feat: 预览页构建

.env.development

@@ -1,24 +1,24 @@
 VITE_PORT = 3100
 
 # Whether to open mock
-VITE_USE_MOCK = true
+VITE_USE_MOCK = false
 
 # public path
 VITE_PUBLIC_PATH = /
 
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
-VITE_PROXY = [["/api","http://localhost:7070"],["/upload","http://localhost:3001/upload"]]
+VITE_PROXY = [["/api","http://localhost:7070/api"],["/upload","http://localhost:3001/upload"]]
 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
 
 # Delete console
 VITE_DROP_CONSOLE = false
 
 # Basic interface address SPA
-VITE_GLOB_API_URL=/api
+VITE_GLOB_API_URL=
 
 # File upload address， optional
 VITE_GLOB_UPLOAD_URL=/upload
 
 # Interface prefix
-VITE_GLOB_API_URL_PREFIX=
+VITE_GLOB_API_URL_PREFIX=/api

.husky/pre-commit

@@ -6,9 +6,9 @@
 
 # Check the file name
 # ! ls-lint cannot be used normally in mac pro of M1 system.
-npm run lint:ls-lint
+# npm run lint:ls-lint
 
 # Format and submit code according to lintstagedrc.js configuration
-npm run lint:lint-staged
+# npm run lint:lint-staged
 
-npm run lint:pretty
+# npm run lint:pretty

.vscode/settings.json

@@ -179,8 +179,11 @@
   "[vue]": {
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": false
-    }
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "editor.formatOnSave": true,
+
   "i18n-ally.localesPaths": ["src/locales/lang"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.sortKeys": true,

src/api/sys/model/userModel.ts

@@ -2,7 +2,7 @@
  * @description: Login interface parameters
  */
 export interface LoginParams {
-  username: string
+  account: string
   password: string
 }
 

src/api/sys/tree.ts

@@ -0,0 +1,21 @@
+import { defHttp } from '/@/utils/http/axios'
+
+import { ErrorMessageMode } from '/@/utils/http/axios/types'
+
+enum Api {
+  SectionAll = '/contract/section/all'
+}
+
+/**
+ * @description: 获取设计表树结构
+ */
+export function sectionAllApi(mode: ErrorMessageMode = 'message') {
+  return defHttp.get<LoginResultModel>(
+    {
+      url: Api.SectionAll
+    },
+    {
+      errorMessageMode: mode
+    }
+  )
+}

src/api/sys/user.ts

@@ -10,7 +10,7 @@ import { ErrorMessageMode } from '/@/utils/http/axios/types'
 
 enum Api {
   Login = '/login',
-  GetUserInfoById = '/getUserInfoById',
+  GetUserInfoById = '/projectAccount',
   GetPermCodeByUserId = '/getPermCodeByUserId'
 }
 
@@ -32,10 +32,9 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal')
 /**
  * @description: getUserInfoById
  */
-export function getUserInfoById(params: GetUserInfoByUserIdParams) {
+export function getUserInfoById() {
   return defHttp.get<GetUserInfoByUserIdModel>({
-    url: Api.GetUserInfoById,
-    params
+    url: Api.GetUserInfoById
   })
 }
 

src/components/registerGlobComp.ts

@@ -11,6 +11,8 @@ const compList = [Icon, Button, AntButton.Group]
 
 export function registerGlobComp(app: App) {
   compList.forEach((comp: any) => {
+    console.log(comp.name)
+
     app.component(comp.name || comp.displayName, comp)
   })
 }

src/design/var/index.less

@@ -2,7 +2,7 @@
 @import 'easing';
 @import 'breakpoint';
 
-@namespace: vben;
+@namespace: zh;
 
 // tabs
 @multiple-height: 30px;

src/enums/httpEnum.ts

@@ -23,9 +23,9 @@ export enum RequestEnum {
  */
 export enum ContentTypeEnum {
   // json
-  JSON = 'application/json;charset=UTF-8',
+  JSON = 'application/json; charset=UTF-8;',
   // form-data qs
-  FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
+  FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8;',
   // form-data  upload
-  FORM_DATA = 'multipart/form-data;charset=UTF-8'
+  FORM_DATA = 'multipart/form-data;charset=UTF-8;'
 }

src/settings/designSetting.ts

@@ -1,5 +1,5 @@
 export default {
-  prefixCls: 'vben'
+  prefixCls: 'zh'
 }
 
 // app theme preset color

src/store/modules/user.ts

@@ -86,15 +86,17 @@ class User extends VuexModule {
   ): Promise<GetUserInfoByUserIdModel | null> {
     try {
       const { goHome = true, mode, ...loginParams } = params
-      const data = await loginApi(loginParams, mode)
 
-      const { token, userId } = data
+      const token = await loginApi(loginParams, mode)
+      console.log(token)
+
+      // const { token, userId } = data
 
       // save token
       this.commitTokenState(token)
 
       // get user info
-      const userInfo = await this.getUserInfoAction({ userId })
+      const userInfo = await this.getUserInfoAction()
 
       goHome && (await router.replace(PageEnum.BASE_HOME))
       return userInfo
@@ -104,8 +106,8 @@ class User extends VuexModule {
   }
 
   @Action
-  async getUserInfoAction({ userId }: GetUserInfoByUserIdParams) {
-    const userInfo = await getUserInfoById({ userId })
+  async getUserInfoAction() {
+    const userInfo = await getUserInfoById()
     const { roles } = userInfo
     const roleList = roles.map(item => item.value) as RoleEnum[]
     this.commitUserInfoState(userInfo)

src/utils/http/axios/index.ts

@@ -48,7 +48,7 @@ const transform: AxiosTransform = {
       return errorResult
     }
     //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
-    const { code, result, message } = data
+    const { code, result, msg: message } = data
 
     // 这里逻辑可以根据项目进行修改
     const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS
@@ -186,6 +186,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
         // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
         // 数据处理方式
         transform,
+        // withCredentials: true,
         // 配置项，下面的选项都可以在独立的接口请求中覆盖
         requestOptions: {
           // 默认将prefix 添加到url
@@ -201,7 +202,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           // 接口地址
           apiUrl: globSetting.apiUrl,
           //  是否加入时间戳
-          joinTime: true,
+          joinTime: false,
           // 忽略重复请求
           ignoreCancelToken: true
         }

src/utils/http/axios/types.ts

@@ -21,7 +21,7 @@ export interface RequestOptions {
 export interface Result<T = any> {
   code: number
   type: 'success' | 'error' | 'warning'
-  message: string
+  msg: string
   result: T
 }
 

src/views/sys/login/ForgetPasswordForm.vue

@@ -33,14 +33,14 @@
   </template>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref, computed, unref } from 'vue'
+  import { defineComponent, reactive, ref, computed, unref } from 'vue';
 
-  import LoginFormTitle from './LoginFormTitle.vue'
-  import { Form, Input, Button } from 'ant-design-vue'
-  import { CountdownInput } from '/@/components/CountDown'
+  import LoginFormTitle from './LoginFormTitle.vue';
+  import { Form, Input, Button } from 'ant-design-vue';
+  import { CountdownInput } from '/@/components/CountDown';
 
-  import { useI18n } from '/@/hooks/web/useI18n'
-  import { useLoginState, useFormRules, LoginStateEnum } from './useLogin'
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';
 
   export default defineComponent({
     name: 'ForgetPasswordForm',
@@ -50,28 +50,28 @@
       FormItem: Form.Item,
       Input,
       CountdownInput,
-      LoginFormTitle
+      LoginFormTitle,
     },
     setup() {
-      const { t } = useI18n()
-      const { handleBackLogin, getLoginState } = useLoginState()
-      const { getFormRules } = useFormRules()
+      const { t } = useI18n();
+      const { handleBackLogin, getLoginState } = useLoginState();
+      const { getFormRules } = useFormRules();
 
-      const formRef = ref<any>(null)
-      const loading = ref(false)
+      const formRef = ref<any>(null);
+      const loading = ref(false);
 
       const formData = reactive({
         account: '',
         mobile: '',
-        sms: ''
-      })
+        sms: '',
+      });
 
-      const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)
+      const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD);
 
       async function handleReset() {
-        const form = unref(formRef)
-        if (!form) return
-        await form.resetFields()
+        const form = unref(formRef);
+        if (!form) return;
+        await form.resetFields();
       }
 
       return {
@@ -82,8 +82,8 @@
         handleReset,
         loading,
         handleBackLogin,
-        getShow
-      }
-    }
-  })
+        getShow,
+      };
+    },
+  });
 </script>

src/views/sys/login/Login.vue

@@ -32,10 +32,10 @@
             class="my-auto mx-auto xl:ml-20 bg-white xl:bg-transparent px-5 py-8 sm:px-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto enter-x relative"
           >
             <LoginForm />
-            <ForgetPasswordForm />
-            <RegisterForm />
-            <MobileForm />
-            <QrCodeForm />
+            <!-- <ForgetPasswordForm /> -->
+            <!-- <RegisterForm /> -->
+            <!-- <MobileForm /> -->
+            <!-- <QrCodeForm /> -->
           </div>
         </div>
       </div>

src/views/sys/login/LoginForm.vue

@@ -40,7 +40,7 @@
         {{ t('sys.login.registerButton') }}
       </Button> -->
     </FormItem>
-    <ARow class="enter-x">
+    <!-- <ARow class="enter-x">
       <ACol :xs="24" :md="8">
         <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
           {{ t('sys.login.mobileSignInFormTitle') }}
@@ -56,16 +56,16 @@
           {{ t('sys.login.registerButton') }}
         </Button>
       </ACol>
-    </ARow>
+    </ARow> -->
 
     <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>
 
     <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
-      <GithubFilled />
+      <!-- <GithubFilled />
       <WechatFilled />
       <AlipayCircleFilled />
       <GoogleCircleFilled />
-      <TwitterCircleFilled />
+      <TwitterCircleFilled /> -->
     </div>
   </Form>
 </template>
@@ -73,13 +73,13 @@
   import { defineComponent, reactive, ref, toRaw, unref, computed } from 'vue'
 
   import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue'
-  import {
-    GithubFilled,
-    WechatFilled,
-    AlipayCircleFilled,
-    GoogleCircleFilled,
-    TwitterCircleFilled
-  } from '@ant-design/icons-vue'
+  // import {
+  //   GithubFilled,
+  //   WechatFilled,
+  //   AlipayCircleFilled,
+  //   GoogleCircleFilled,
+  //   TwitterCircleFilled
+  // } from '@ant-design/icons-vue'
   import LoginFormTitle from './LoginFormTitle.vue'
 
   import { useI18n } from '/@/hooks/web/useI18n'
@@ -103,12 +103,12 @@
       Input,
       Divider,
       LoginFormTitle,
-      InputPassword: Input.Password,
-      GithubFilled,
-      WechatFilled,
-      AlipayCircleFilled,
-      GoogleCircleFilled,
-      TwitterCircleFilled
+      InputPassword: Input.Password
+      // GithubFilled,
+      // WechatFilled,
+      // AlipayCircleFilled,
+      // GoogleCircleFilled,
+      // TwitterCircleFilled
     },
     setup() {
       const { t } = useI18n()
@@ -123,8 +123,8 @@
       const rememberMe = ref(false)
 
       const formData = reactive({
-        account: 'vben',
-        password: '123456'
+        account: 'admin',
+        password: 'admin'
       })
 
       const { validForm } = useFormValid(formRef)
@@ -146,7 +146,7 @@
           const userInfo = await userStore.login(
             toRaw({
               password: data.password,
-              username: data.account
+              account: data.account
             })
           )
           if (userInfo) {

src/views/sys/login/LoginFormTitle.vue

@@ -4,17 +4,17 @@
   </h2>
 </template>
 <script lang="ts">
-  import { defineComponent, computed, unref } from 'vue'
+  import { defineComponent, computed, unref } from 'vue';
 
-  import { useI18n } from '/@/hooks/web/useI18n'
-  import { LoginStateEnum, useLoginState } from './useLogin'
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { LoginStateEnum, useLoginState } from './useLogin';
 
   export default defineComponent({
     name: 'LoginFormTitle',
     setup() {
-      const { t } = useI18n()
+      const { t } = useI18n();
 
-      const { getLoginState } = useLoginState()
+      const { getLoginState } = useLoginState();
 
       const getFormTitle = computed(() => {
         const titleObj = {
@@ -22,14 +22,14 @@
           [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
           [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
           [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
-          [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle')
-        }
-        return titleObj[unref(getLoginState)]
-      })
+          [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
+        };
+        return titleObj[unref(getLoginState)];
+      });
 
       return {
-        getFormTitle
-      }
-    }
-  })
+        getFormTitle,
+      };
+    },
+  });
 </script>

src/views/sys/login/MobileForm.vue

@@ -25,14 +25,14 @@
   </template>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref, computed, unref } from 'vue'
+  import { defineComponent, reactive, ref, computed, unref } from 'vue';
 
-  import { Form, Input, Button } from 'ant-design-vue'
-  import { CountdownInput } from '/@/components/CountDown'
-  import LoginFormTitle from './LoginFormTitle.vue'
+  import { Form, Input, Button } from 'ant-design-vue';
+  import { CountdownInput } from '/@/components/CountDown';
+  import LoginFormTitle from './LoginFormTitle.vue';
 
-  import { useI18n } from '/@/hooks/web/useI18n'
-  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin'
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
 
   export default defineComponent({
     name: 'MobileForm',
@@ -42,29 +42,29 @@
       FormItem: Form.Item,
       Input,
       CountdownInput,
-      LoginFormTitle
+      LoginFormTitle,
     },
     setup() {
-      const { t } = useI18n()
-      const { handleBackLogin, getLoginState } = useLoginState()
-      const { getFormRules } = useFormRules()
+      const { t } = useI18n();
+      const { handleBackLogin, getLoginState } = useLoginState();
+      const { getFormRules } = useFormRules();
 
-      const formRef = ref<any>(null)
-      const loading = ref(false)
+      const formRef = ref<any>(null);
+      const loading = ref(false);
 
       const formData = reactive({
         mobile: '',
-        sms: ''
-      })
+        sms: '',
+      });
 
-      const { validForm } = useFormValid(formRef)
+      const { validForm } = useFormValid(formRef);
 
-      const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE)
+      const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE);
 
       async function handleLogin() {
-        const data = await validForm()
-        if (!data) return
-        console.log(data)
+        const data = await validForm();
+        if (!data) return;
+        console.log(data);
       }
 
       return {
@@ -75,8 +75,8 @@
         handleLogin,
         loading,
         handleBackLogin,
-        getShow
-      }
-    }
-  })
+        getShow,
+      };
+    },
+  });
 </script>

src/views/sys/login/QrCodeForm.vue

@@ -15,36 +15,36 @@
   </template>
 </template>
 <script lang="ts">
-  import { defineComponent, computed, unref } from 'vue'
+  import { defineComponent, computed, unref } from 'vue';
 
-  import LoginFormTitle from './LoginFormTitle.vue'
-  import { Button, Divider } from 'ant-design-vue'
-  import { QrCode } from '/@/components/Qrcode/index'
+  import LoginFormTitle from './LoginFormTitle.vue';
+  import { Button, Divider } from 'ant-design-vue';
+  import { QrCode } from '/@/components/Qrcode/index';
 
-  import { useI18n } from '/@/hooks/web/useI18n'
-  import { useLoginState, LoginStateEnum } from './useLogin'
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useLoginState, LoginStateEnum } from './useLogin';
 
-  const qrCodeUrl = 'https://vvbin.cn/next/login'
+  const qrCodeUrl = 'https://vvbin.cn/next/login';
   export default defineComponent({
     name: 'QrCodeForm',
     components: {
       Button,
       QrCode,
       Divider,
-      LoginFormTitle
+      LoginFormTitle,
     },
     setup() {
-      const { t } = useI18n()
-      const { handleBackLogin, getLoginState } = useLoginState()
+      const { t } = useI18n();
+      const { handleBackLogin, getLoginState } = useLoginState();
 
-      const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
+      const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE);
 
       return {
         t,
         handleBackLogin,
         qrCodeUrl,
-        getShow
-      }
-    }
-  })
+        getShow,
+      };
+    },
+  });
 </script>

src/views/sys/login/RegisterForm.vue

@@ -59,15 +59,15 @@
   </template>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref, unref, computed } from 'vue'
+  import { defineComponent, reactive, ref, unref, computed } from 'vue';
 
-  import LoginFormTitle from './LoginFormTitle.vue'
-  import { Form, Input, Button, Checkbox } from 'ant-design-vue'
-  import { StrengthMeter } from '/@/components/StrengthMeter'
-  import { CountdownInput } from '/@/components/CountDown'
+  import LoginFormTitle from './LoginFormTitle.vue';
+  import { Form, Input, Button, Checkbox } from 'ant-design-vue';
+  import { StrengthMeter } from '/@/components/StrengthMeter';
+  import { CountdownInput } from '/@/components/CountDown';
 
-  import { useI18n } from '/@/hooks/web/useI18n'
-  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin'
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
 
   export default defineComponent({
     name: 'RegisterPasswordForm',
@@ -80,14 +80,14 @@
       Checkbox,
       StrengthMeter,
       CountdownInput,
-      LoginFormTitle
+      LoginFormTitle,
     },
     setup() {
-      const { t } = useI18n()
-      const { handleBackLogin, getLoginState } = useLoginState()
+      const { t } = useI18n();
+      const { handleBackLogin, getLoginState } = useLoginState();
 
-      const formRef = ref<any>(null)
-      const loading = ref(false)
+      const formRef = ref<any>(null);
+      const loading = ref(false);
 
       const formData = reactive({
         account: '',
@@ -95,18 +95,18 @@
         confirmPassword: '',
         mobile: '',
         sms: '',
-        policy: false
-      })
+        policy: false,
+      });
 
-      const { getFormRules } = useFormRules(formData)
-      const { validForm } = useFormValid(formRef)
+      const { getFormRules } = useFormRules(formData);
+      const { validForm } = useFormValid(formRef);
 
-      const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
+      const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
 
       async function handleRegister() {
-        const data = await validForm()
-        if (!data) return
-        console.log(data)
+        const data = await validForm();
+        if (!data) return;
+        console.log(data);
       }
 
       return {
@@ -117,8 +117,8 @@
         handleRegister,
         loading,
         handleBackLogin,
-        getShow
-      }
-    }
-  })
+        getShow,
+      };
+    },
+  });
 </script>

src/views/sys/login/useLogin.ts

@@ -1,76 +1,76 @@
-import { RuleObject } from 'ant-design-vue/lib/form/interface'
-import { ref, computed, unref, Ref } from 'vue'
-import { useI18n } from '/@/hooks/web/useI18n'
+import { RuleObject } from 'ant-design-vue/lib/form/interface';
+import { ref, computed, unref, Ref } from 'vue';
+import { useI18n } from '/@/hooks/web/useI18n';
 
 export enum LoginStateEnum {
   LOGIN,
   REGISTER,
   RESET_PASSWORD,
   MOBILE,
-  QR_CODE
+  QR_CODE,
 }
 
-const currentState = ref(LoginStateEnum.LOGIN)
+const currentState = ref(LoginStateEnum.LOGIN);
 
 export function useLoginState() {
   function setLoginState(state: LoginStateEnum) {
-    currentState.value = state
+    currentState.value = state;
   }
 
-  const getLoginState = computed(() => currentState.value)
+  const getLoginState = computed(() => currentState.value);
 
   function handleBackLogin() {
-    setLoginState(LoginStateEnum.LOGIN)
+    setLoginState(LoginStateEnum.LOGIN);
   }
 
-  return { setLoginState, getLoginState, handleBackLogin }
+  return { setLoginState, getLoginState, handleBackLogin };
 }
 
 export function useFormValid<T extends Object = any>(formRef: Ref<any>) {
   async function validForm() {
-    const form = unref(formRef)
-    if (!form) return
-    const data = await form.validate()
-    return data as T
+    const form = unref(formRef);
+    if (!form) return;
+    const data = await form.validate();
+    return data as T;
   }
 
-  return { validForm }
+  return { validForm };
 }
 
 export function useFormRules(formData?: Recordable) {
-  const { t } = useI18n()
+  const { t } = useI18n();
 
-  const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder')))
-  const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder')))
-  const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')))
-  const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder')))
+  const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder')));
+  const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder')));
+  const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')));
+  const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder')));
 
   const validatePolicy = async (_: RuleObject, value: boolean) => {
-    return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve()
-  }
+    return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve();
+  };
 
   const validateConfirmPassword = (password: string) => {
     return async (_: RuleObject, value: string) => {
       if (!value) {
-        return Promise.reject(t('sys.login.passwordPlaceholder'))
+        return Promise.reject(t('sys.login.passwordPlaceholder'));
       }
       if (value !== password) {
-        return Promise.reject(t('sys.login.diffPwd'))
+        return Promise.reject(t('sys.login.diffPwd'));
       }
-      return Promise.resolve()
-    }
-  }
+      return Promise.resolve();
+    };
+  };
 
   const getFormRules = computed(() => {
-    const accountFormRule = unref(getAccountFormRule)
-    const passwordFormRule = unref(getPasswordFormRule)
-    const smsFormRule = unref(getSmsFormRule)
-    const mobileFormRule = unref(getMobileFormRule)
+    const accountFormRule = unref(getAccountFormRule);
+    const passwordFormRule = unref(getPasswordFormRule);
+    const smsFormRule = unref(getSmsFormRule);
+    const mobileFormRule = unref(getMobileFormRule);
 
     const mobileRule = {
       sms: smsFormRule,
-      mobile: mobileFormRule
-    }
+      mobile: mobileFormRule,
+    };
     switch (unref(currentState)) {
       // register form rules
       case LoginStateEnum.REGISTER:
@@ -78,32 +78,32 @@ export function useFormRules(formData?: Recordable) {
           account: accountFormRule,
           password: passwordFormRule,
           confirmPassword: [
-            { validator: validateConfirmPassword(formData?.password), trigger: 'change' }
+            { validator: validateConfirmPassword(formData?.password), trigger: 'change' },
           ],
           policy: [{ validator: validatePolicy, trigger: 'change' }],
-          ...mobileRule
-        }
+          ...mobileRule,
+        };
 
       // reset password form rules
       case LoginStateEnum.RESET_PASSWORD:
         return {
           account: accountFormRule,
-          ...mobileRule
-        }
+          ...mobileRule,
+        };
 
       // mobile form rules
       case LoginStateEnum.MOBILE:
-        return mobileRule
+        return mobileRule;
 
       // login form rules
       default:
         return {
           account: accountFormRule,
-          password: passwordFormRule
-        }
+          password: passwordFormRule,
+        };
     }
-  })
-  return { getFormRules }
+  });
+  return { getFormRules };
 }
 
 function createRule(message: string) {
@@ -111,7 +111,7 @@ function createRule(message: string) {
     {
       required: true,
       message,
-      trigger: 'change'
-    }
-  ]
+      trigger: 'change',
+    },
+  ];
 }

src/views/sys/preview/index.vue

@@ -1,9 +1,57 @@
 <template>
-  <div class="w-full h-full">预览页</div>
+  <div :class="prefixCls" class="w-full h-full py-15 px-20">
+    <div class="border-b-1 border-gray-400 flex justify-between pb-2">
+      <span class="text-lg font-black">设计数量表管理平台</span>
+      <AButton size="small" @click="$router.push('/login')">登录</AButton>
+    </div>
+    <div class="flex py-5 container w-full">
+      <div class="w-1/4 border-gray-300 border-1 border">
+        <BasicTree
+          v-if="treeData && treeData.length"
+          :tree-data="treeData"
+          :replace-fields="replaceFields"
+          :show-line="true"
+          :defaultExpandAll="true"
+        />
+      </div>
+      <div class="w-3/4 border-gray-300 border-1 border ml-10"></div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-  export default {}
+  import { onMounted, ref } from 'vue'
+  import { sectionAllApi } from '/@/api/sys/tree'
+  import { BasicTree } from '/@/components/Tree/index'
+  import { useDesign } from '/@/hooks/web/useDesign'
+  export default {
+    name: 'Preview',
+    components: {
+      BasicTree
+    },
+    setup() {
+      const treeData = ref([])
+      async function initData() {
+        const result = await sectionAllApi()
+        treeData.value = result.children
+      }
+      onMounted(() => {
+        initData()
+      })
+
+      const { prefixCls } = useDesign('preview')
+      const replaceFields = { children: 'children', title: 'name', key: 'id' }
+      return { treeData, replaceFields, prefixCls }
+    }
+  }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-preview';
+
+  .@{prefix-cls} {
+    .container {
+      height: calc(100% - 37px);
+    }
+  }
+</style>

stylelint.config.js

@@ -6,14 +6,14 @@ module.exports = {
     'selector-pseudo-class-no-unknown': [
       true,
       {
-        ignorePseudoClasses: ['global'],
-      },
+        ignorePseudoClasses: ['global']
+      }
     ],
     'at-rule-no-unknown': [
       true,
       {
-        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin'],
-      },
+        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin']
+      }
     ],
     'no-empty-source': null,
     'named-grid-areas-no-invalid': null,
@@ -24,10 +24,10 @@ module.exports = {
     'declaration-colon-space-before': 'never',
     'declaration-block-trailing-semicolon': 'always',
     'rule-empty-line-before': [
-      'always',
+      'never',
       {
-        ignore: ['after-comment', 'first-nested'],
-      },
+        ignore: ['after-comment', 'first-nested']
+      }
     ],
     'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
     // Specify the alphabetical order of the attributes in the declaration block
@@ -177,8 +177,8 @@ module.exports = {
       'page',
       'set-link-source',
       'unicode-bidi',
-      'speak',
-    ],
+      'speak'
+    ]
   },
-  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
-};
+  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts']
+}

windi.config.ts

@@ -1,8 +1,8 @@
-import lineClamp from 'windicss/plugin/line-clamp';
-import colors from 'windicss/colors';
+import lineClamp from 'windicss/plugin/line-clamp'
+import colors from 'windicss/colors'
 
-import { defineConfig } from 'vite-plugin-windicss';
-import { primaryColor } from './build/config/themeConfig';
+import { defineConfig } from 'vite-plugin-windicss'
+import { primaryColor } from './build/config/themeConfig'
 
 export default defineConfig({
   darkMode: 'class',
@@ -11,18 +11,18 @@ export default defineConfig({
     extend: {
       colors: {
         ...colors,
-        primary: primaryColor,
-      },
-      screens: {
-        sm: '576px',
-        md: '768px',
-        lg: '992px',
-        xl: '1200px',
-        '2xl': '1600px',
-      },
-    },
-  },
-});
+        primary: primaryColor
+      }
+      // screens: {
+      //   sm: '576px',
+      //   md: '768px',
+      //   lg: '992px',
+      //   xl: '1200px',
+      //   '2xl': '1600px'
+      // }
+    }
+  }
+})
 
 /**
  * Used for animation when the element is displayed
@@ -30,46 +30,46 @@ export default defineConfig({
  */
 function createEnterPlugin(maxOutput = 10) {
   const createCss = (index: number, d = 'x') => {
-    const upd = d.toUpperCase();
+    const upd = d.toUpperCase()
     return {
       [`*> .enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(50px)`,
+        transform: `translate${upd}(50px)`
       },
       [`*> .-enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(-50px)`,
+        transform: `translate${upd}(-50px)`
       },
       [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
         'z-index': `${10 - index}`,
         opacity: '0',
         animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
         'animation-fill-mode': 'forwards',
-        'animation-delay': `${(index * 1) / 10}s`,
-      },
-    };
-  };
+        'animation-delay': `${(index * 1) / 10}s`
+      }
+    }
+  }
   const handler = ({ addBase }) => {
-    const addRawCss = {};
+    const addRawCss = {}
     for (let index = 1; index < maxOutput; index++) {
       Object.assign(addRawCss, {
         ...createCss(index, 'x'),
-        ...createCss(index, 'y'),
-      });
+        ...createCss(index, 'y')
+      })
     }
     addBase({
       ...addRawCss,
       [`@keyframes enter-x-animation`]: {
         to: {
           opacity: '1',
-          transform: 'translateX(0)',
-        },
+          transform: 'translateX(0)'
+        }
       },
       [`@keyframes enter-y-animation`]: {
         to: {
           opacity: '1',
-          transform: 'translateY(0)',
-        },
-      },
-    });
-  };
-  return { handler };
+          transform: 'translateY(0)'
+        }
+      }
+    })
+  }
+  return { handler }
 }