gxwebsoft
/
websoft-cms
1
0
Fork 4
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化框架

master
科技小王子 9 months ago
parent
52bc858bf4
commit
9ce781dbfd
14 changed files with 531 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      assets/svg/search.svg
  2. 23
      components/AppFooter.vue
  3. 375
      components/AppHeader.vue
  4. 9
      composables/configState.ts
  5. 4
      composables/useServerRequest.ts
  6. 11
      layouts/default.vue
  7. 2
      nuxt.config.ts
  8. 10
      pages/[custom]/index.vue
  9. 3
      pages/demo/[name].vue
  10. 6
      pages/index.vue
  11. 31
      pages/test.vue
  12. 12
      types/config.ts
  13. 52
      utils/common.ts
  14. 88
      utils/request.ts

1
assets/svg/search.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 260 B

23
components/AppFooter.vue
View File

@ -8,10 +8,10 @@
<footer> <footer>
<div class="w-full md:w-3/4 m-auto flex justify-between py-10 text-center p-2"> <div class="w-full md:w-3/4 m-auto flex justify-between py-10 text-center p-2">
<div class="text-gray-5 gap-xl flex"> <div class="text-gray-5 gap-xl flex">
<span>© {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
<span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
<a class="text-gray-5" href="https://beian.miit.gov.cn/" target="_blank"> 备案号：{{ config?.icpNo }}</a> <a class="text-gray-5" href="https://beian.miit.gov.cn/" target="_blank"> 备案号：{{ config?.icpNo }}</a>
</div> </div>
<a class="cursor-pointer text-gray-5" @click="reload">刷新</a>
<a class="cursor-pointer text-gray-5" @click="reload">返回顶部</a>
</div> </div>
</footer> </footer>
<el-backtop></el-backtop> <el-backtop></el-backtop>
@ -22,17 +22,20 @@
import type {Config} from "~/types/config"; import type {Config} from "~/types/config";
import {useServerRequest} from "~/composables/useServerRequest"; import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult} from "~/api"; import type {ApiResult} from "~/api";
import {useConfigInfo} from "#imports";
const config = ref<Config>()
const config = useConfigInfo();
// 获取数据
const reload = async () => {
const { data: fields } = await useServerRequest<ApiResult<Config>>('/cms/website-field/config', {})
config.value = fields.value?.data;
ElMessage.success('刷新成功')
}
console.log('------------------',config.value)
reload();
// 获取数据
// const reload = async () => {
// const { data: fields } = await useServerRequest<ApiResult<Config>>('/cms/website-field/config', {})
// config.value = fields.value?.data;
// ElMessage.success('刷新成功')
// }
//
// reload();
</script> </script>
<style lang="scss"> <style lang="scss">

375
components/AppHeader.vue
View File

@ -1,49 +1,258 @@
<template> <template>
<header class="header bg-black fixed z-10 w-full">
<header class="header fixed" style="display: none">
<div class="wrap">
<div class="header_box fix">
<div class="header_logo">
<a href="https://www.algig.cn/" alt="" title="" target="view_window"> <h1 class="logo"></h1> </a>
</div>
<div class="header_tools">
<ul class="fix">
<li class="mobile_key">
<a href="https://www.algig.cn/about-us.htm#menu"> <i class="iconfont"></i> </a>
</li>
<li class="search"><i class="iconfont"></i></li>
<li class="quick_a">
<a href="javascript:;">LANGUAGE<i class="iconfont"></i></a>
<div class="quick_box">
<a target="_blank" href="https://www.algig.cn/"><i class="lin">|</i> 中文</a>
<a target="_blank" href="http://en.algig.cn/"><i class="lin">|</i> English</a>
</div>
</li>
</ul>
</div>
<!-- 下拉导航有两种不同的形式 -->
<div class="header_nav">
<div id="menu" class="nav_container">
<ul>
<li>
<a href="https://www.algig.cn/about-us.htm" class="cur" target="">关于我们</a>
<!-- 普通下拉 -->
<div class="inner_box fix">
<div class="box_l">
<ul>
<li><a href="https://www.algig.cn/company-profile.htm">企业简介</a></li>
<li><a href="https://www.algig.cn/corporate-culture.htm">企业文化</a></li>
<li><a href="https://www.algig.cn/leader-visits.jsp">领导关怀</a></li>
<li><a href="https://www.algig.cn/development-milestones.htm">发展历程</a></li>
<li><a href="https://www.algig.cn/company-honors.jsp">企业荣誉</a></li>
<li><a href="https://www.algig.cn/global-footprint.jsp">全球布局</a></li>
<li><a href="https://www.algig.cn/organizational-structure.htm">组织架构</a></li>
<li><a href="https://www.algig.cn/social-responsibility.jsp">社会责任</a></li>
<li><a href="https://www.algig.cn/party-construction.jsp">党建品牌</a></li>
<li><a href="https://www.algig.cn/employee-activities.jsp">员工风采</a></li>
</ul>
</div>
<div class="box_r">
<img
src="./关于我们_航空航天交通铝新材料先进制造商_files/a476ff3e324940a98f172b9b2ccc4320.jpg"
alt=""
class="img"
/>
</div>
</div>
</li>
<li class="pro">
<a href="https://www.algig.cn/our-businesses/aerospace&amp;aviation.jsp" target="">业务领域</a>
<!-- 产品下拉 -->
<div class="inner_box">
<div class="box_l">
<ul>
<!-- 标题 是t -->
<li class="t">
<a href="https://www.algig.cn/our-businesses/aerospace&amp;aviation.jsp">航空航天领域</a>
</li>
<li><a href="https://www.algig.cn/our-businesses/aerospace&amp;aviation.jsp">航空</a></li>
<li><a href="https://www.algig.cn/our-businesses/aerospace&amp;aviation.jsp">航天</a></li>
<li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
</ul>
<ul>
<!-- 标题 是t -->
<li class="t">
<a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">轨道交通领域</a>
</li>
<li><a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">动车组</a></li>
<li><a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">地铁</a></li>
<li><a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">空轨</a></li>
<li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
</ul>
<ul>
<!-- 标题 是t -->
<li class="t"><a href="https://www.algig.cn/our-businesses/automotive.jsp">汽车领域</a></li>
<li><a href="https://www.algig.cn/our-businesses/automotive.jsp">乘用车</a></li>
<li><a href="https://www.algig.cn/our-businesses/automotive.jsp">油罐车</a></li>
<li><a href="https://www.algig.cn/our-businesses/automotive.jsp">客车</a></li>
<li><a href="https://www.algig.cn/our-businesses/automotive.jsp">厢车</a></li>
<li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
</ul>
<ul>
<!-- 标题 是t -->
<li class="t"><a href="https://www.algig.cn/our-businesses/marine.jsp">船舶领域</a></li>
<li><a href="https://www.algig.cn/our-businesses/marine.jsp">船用铝合金</a></li>
<li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
</ul>
<ul>
<!-- 标题 是t -->
<li class="t"><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">3C电子领域</a></li>
<li><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">电脑产品</a></li>
<li><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">智能手机</a></li>
<li><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">其他3C及周边</a></li>
<li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
</ul>
</div>
<div class="box_r">
<img
src="./关于我们_航空航天交通铝新材料先进制造商_files/1412f7d1f27241f6a2e0ea4db34d5c62.jpg"
alt=""
class="img"
/>
</div>
</div>
</li>
<li>
<a href="https://www.algig.cn/our-advantages.htm" target="">核心优势</a>
<!-- 普通下拉 -->
<div class="inner_box fix">
<div class="box_l">
<ul>
<li><a href="https://www.algig.cn/scientific-innovation.htm">科技创新</a></li>
<li><a href="https://www.algig.cn/technology.htm">技术实力</a></li>
<li><a href="https://www.algig.cn/intelligent-manufacturing.htm">智慧互联</a></li>
<li><a href="https://www.algig.cn/quality-management.jsp">质量管理</a></li>
</ul>
</div>
<div class="box_r">
<img
src="./关于我们_航空航天交通铝新材料先进制造商_files/2ce9966e83004469af3036168abded7f.jpg"
alt=""
class="img"
/>
</div>
</div>
</li>
<li>
<a href="https://www.algig.cn/news-releases/company-news.jsp" target="">新闻资讯</a>
<!-- 普通下拉 -->
<div class="inner_box fix">
<div class="box_l">
<ul>
<li><a href="https://www.algig.cn/news-releases/company-news.jsp">企业动态</a></li>
<li><a href="https://www.algig.cn/news-releases/announcement.jsp">企业公告</a></li>
<li><a href="https://www.algig.cn/news-releases/media-focus.jsp">媒体视角</a></li>
</ul>
</div>
<div class="box_r">
<img
src="./关于我们_航空航天交通铝新材料先进制造商_files/43fdf4f688784dc8ad3499b61b92d515.jpg"
alt=""
class="img"
/>
</div>
</div>
</li>
<li>
<a href="https://www.algig.cn/talent-policy.htm" target="">职业发展</a>
<!-- 普通下拉 -->
<div class="inner_box fix">
<div class="box_l">
<ul>
<li><a href="https://www.algig.cn/talent-policy.htm">人才政策</a></li>
<li><a href="https://www.algig.cn/job-opportunities.jsp">社会招聘</a></li>
<li><a href="https://www.algig.cn/campus-recruitment.jsp">校园招聘</a></li>
<li><a href="https://www.algig.cn/contact-us.jsp">联系我们</a></li>
</ul>
</div>
<div class="box_r">
<img
src="./关于我们_航空航天交通铝新材料先进制造商_files/1907e129b5154356989bcd130b1c5dce.jpg"
alt=""
class="img"
/>
</div>
</div>
</li>
<li>
<a href="https://www.algig.cn/corporate-governance.htm" target="">信访举报</a>
<!-- 普通下拉 -->
</li>
<li>
<a href="https://www.algig.cn/Information/nnl-informition-disclosure.jsp" target="">信息公开</a>
<!-- 普通下拉 -->
</li>
</ul>
</div>
</div>
<div class="header_search_fix">
<div class="box">
<div class="search">请输入您要搜索的关键词...</div>
<form action="https://www.algig.cn/site/solr.htm">
<div class="search_box">
<input type="text" name="keywords" class="input" placeholder="SEARCH HERE" />
<button type="submit" c-text="点击搜索" class="submit common_btn text_cxw_loaded">
<span>点</span><span>击</span><span>搜</span><span>索</span>
</button>
</div>
</form>
</div>
<div class="close">
<i class="iconfont" data-code="xe641;"></i>
</div>
<div class="pro_list">
<div class="t">热门产品搜索</div>
<a href="https://www.algig.cn/our-businesses/aerospace&amp;aviation.jsp">航空航天领域</a>
<a href="https://www.algig.cn/our-businesses/automotive.jsp">汽车领域</a>
<a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">轨道交通领域</a>
</div>
</div>
</div>
</div>
</header>
<header class="header bg-white fixed z-10 w-full">
<div class="flex between md:w-3/4 m-auto px-2"> <div class="flex between md:w-3/4 m-auto px-2">
<div class="header__left flex"> <div class="header__left flex">
<div class="logo w-[180px] flex items-center" @click="reload">
<div class="logo w-[140px] flex items-center" @click="reload">
<nuxt-link v-if="config?.siteLogo" to="/"> <nuxt-link v-if="config?.siteLogo" to="/">
<el-image :src="config.siteLogo" shape="square" :alt="config.siteName" :title="config.siteName" class="w-[120px]" />
<el-image
:src="config.siteLogo"
shape="square"
:alt="config.siteName"
:title="config.siteName"
class="w-[120px]"
/>
</nuxt-link> </nuxt-link>
<nuxt-link v-else to="/"> <nuxt-link v-else to="/">
<text>{{ config?.siteName || '网宿软件' }}</text>
<text>{{ config?.siteName || '网宿软件' }}</text>
</nuxt-link> </nuxt-link>
</div> </div>
<nav v-if="route.path.indexOf('/user') === -1" class="hidden-sm-and-down"> <nav v-if="route.path.indexOf('/user') === -1" class="hidden-sm-and-down">
<el-menu <el-menu
:default-active="currentIndex"
mode="horizontal"
background-color="#000000"
text-color="#fff"
active-text-color="#ffd04b"
:collapse="true"
:ellipsis="false"
style="border-bottom: none"
@select="handleSelect"
:default-active="currentIndex"
mode="horizontal"
:collapse="true"
:ellipsis="false"
style="border-bottom: none"
@select="handleSelect"
> >
<template v-for="(item, index) in navigations"> <template v-for="(item, index) in navigations">
<el-menu-item :index="item.path" :key="index" v-if="index < visibleNumber"
>
<template v-if="item.chd">
<template slot="title">我的工作台</template>
<el-menu-item :index="item.path" v-if="index < visibleNumber">
<template v-if="item.children.length > 0">
<el-sub-menu :index="item.path">
<template #title>
<text class="text-[17px]">{{ item.title }}</text>
</template>
<el-menu-item v-for="(sub,subIndex) in item.children" :index="`${sub.path}`" :key="subIndex">{{ sub.title }}</el-menu-item>
</el-sub-menu>
</template> </template>
<template v-else> <template v-else>
<text class="text-[17px]">{{ item.title }}</text> <text class="text-[17px]">{{ item.title }}</text>
</template> </template>
</el-menu-item
>
</el-menu-item>
</template> </template>
<!-- 顶部菜单超出数量折叠 --> <!-- 顶部菜单超出数量折叠 -->
<el-sub-menu index="more" v-if="navigations && navigations.length > visibleNumber"> <el-sub-menu index="more" v-if="navigations && navigations.length > visibleNumber">
<template #title>更多菜单</template> <template #title>更多菜单</template>
<template v-for="(item, index) in navigations"> <template v-for="(item, index) in navigations">
<el-menu-item
:index="item.path"
:key="index"
v-if="index >= visibleNumber"
>
<el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber">
{{ item.title }}</el-menu-item {{ item.title }}</el-menu-item
> >
</template> </template>
@ -53,11 +262,11 @@
</div> </div>
<div class="header__right items-center"> <div class="header__right items-center">
<el-input <el-input
class="w-50 m-2 mr-20"
placeholder="搜索应用名称"
:suffix-icon="ElIconSearch"
v-model="searchValue"
@keyup.enter.native="handleSearch"
class="w-20 mr-4"
placeholder="站内搜索"
:suffix-icon="ElIconSearch"
v-model="searchValue"
@keyup.enter.native="handleSearch"
/> />
<ClientOnly> <ClientOnly>
<template v-if="token"> <template v-if="token">
@ -79,71 +288,77 @@
</div> </div>
</header> </header>
<div class="header__height__placeholder"></div>
<!-- <div class="header__height__placeholder"></div>-->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type {Config} from "~/types/config";
import type {ApiResult} from "~/api";
import type {Navigation} from "~/api/cms/navigation/model";
import {useServerRequest} from "~/composables/useServerRequest";
const route = useRoute()
import type { Config } from '~/types/config';
import type { ApiResult } from '~/api';
import type { Navigation } from '~/api/cms/navigation/model';
import { useServerRequest } from '~/composables/useServerRequest';
import {useConfigInfo} from "~/composables/configState";
const route = useRoute();
const searchValue = ref<string>()
const token = ref<string | undefined>(undefined)
const navigations = ref<Navigation[] | any>([])
const config = ref<Config | any>({
siteLogo: '/logo.png'
})
// 顶部栏初始数
const visibleNumber = ref<number>(10);
// 当前激活菜单的 index
const currentIndex = ref<string>('2');
const searchValue = ref<string>();
const token = ref<string | undefined>(undefined);
const navigations = ref<Navigation[] | any>([]);
const config = useConfigInfo();
// 顶部栏初始数
const visibleNumber = ref<number>(10);
// 当前激活菜单的 index
const currentIndex = ref<string>('2');
const showSubMenu = ref<boolean>(false);
function handleCommand(command: string) {
switch (command) {
case 'logOut':
logOut()
break;
default:
navigateTo('/user')
break;
function handleCommand(command: string) {
switch (command) {
case 'logOut':
logOut();
break;
default:
navigateTo('/user');
break;
}
} }
}
function logOut() {}
function goLogin() {}
function logOut() {}
const handleSearch = (key: string, keyPath: string) => {
console.log(key, keyPath);
navigateTo('/search?keyword=' + searchValue.value)
}
function goLogin() {}
function handleSelect(key: string, keyPath: any) {
currentIndex.value = key;
navigateTo(`${key}`)
}
const handleSearch = (key: string, keyPath: string) => {
console.log(key, keyPath);
navigateTo('/search?keyword=' + searchValue.value);
};
function handleSelect(key: string, keyPath: any) {
console.log(key,'key')
console.log(keyPath,'keyPath')
currentIndex.value = key;
navigateTo(`${key}`);
}
function openSubMenu(ee) {
showSubMenu.value = true;
console.log('000', showSubMenu.value);
}
// 获取数据
const reload = async () => {
await nextTick()
const { data: fields } = await useServerRequest<ApiResult<Config>>('/cms/website-field/config', {})
config.value = fields.value?.data;
const { data: navigation } = await useServerRequest<ApiResult<Navigation[]>>('/cms/navigation/tree',{query: {
position: 1
}});
navigations.value = navigation.value?.data;
}
// 获取数据
const reload = async () => {
await nextTick();
const { data: fields } = await useServerRequest<ApiResult<Config>>('/cms/website-field/config', {});
config.value = fields.value?.data;
const { data: navigation } = await useServerRequest<ApiResult<Navigation[]>>('/cms/navigation/tree', {
query: {
position: 1
}
});
navigations.value = navigation.value?.data;
};
reload();
reload();
</script> </script>
<style lang="scss"> <style lang="scss">
body{
background-color: #f3f6f8;
}
body {
background-color: #f3f6f8;
}
</style> </style>

9
composables/configState.ts
View File

@ -0,0 +1,9 @@
import { useState } from '#imports';
import type { Config } from '~/types/config';
export const useConfigInfo = () =>
useState<Config>('config', () => {
return {};
});
export const useToken = () => useState('token', () => 'token xxx');

4
composables/useServerRequest.ts
View File

@ -17,8 +17,8 @@ export const useServerRequest = <T>(url: string, opts?: UseFetchOptions<T, unkno
baseUrl.value = runtimeConfig.public.apiBase; baseUrl.value = runtimeConfig.public.apiBase;
// 开发环境 // 开发环境
if(process.env.NODE_ENV === 'development'){ if(process.env.NODE_ENV === 'development'){
// baseUrl.value = 'http://127.0.0.1:9090/api'
baseUrl.value = 'https://modules.gxwebsoft.com/api'
baseUrl.value = 'http://127.0.0.1:9001/api'
// baseUrl.value = 'https://modules.gxwebsoft.com/api'
} }
const defaultOptions: UseFetchOptions<unknown> = { const defaultOptions: UseFetchOptions<unknown> = {
baseURL: baseUrl.value, baseURL: baseUrl.value,

11
layouts/default.vue
View File

@ -4,4 +4,15 @@
<app-footer /> <app-footer />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
//挂载钩子
import {getLoacl, setLocal} from "~/utils/common";
onMounted(() => {
//必须在onMounted的时候才能用local和window
// getLoacl();
window.onbeforeunload = () => {
//离开页面时保存数据，由于可能突发情况，所以重要数据请手动调用setLocal函数
// setLocal(); //如果需要调试本地存储数据，记得把这个注释一下
};
});
</script> </script>

2
nuxt.config.ts
View File

@ -31,7 +31,7 @@ export default defineNuxtConfig({
runtimeConfig: { runtimeConfig: {
public: { public: {
// 一般只需修改租户号和接口地址 // 一般只需修改租户号和接口地址
tenantId: '5',
tenantId: '16880',
domain: 'websoft.top', domain: 'websoft.top',
apiBase: 'https://modules.gxwebsoft.com/api', apiBase: 'https://modules.gxwebsoft.com/api',
// 以下一般不需要修改 // 以下一般不需要修改

10
pages/[custom]/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="banner" v-if="form">
<el-image :src="form.photo"></el-image>
<div class="banner m-auto text-center pt-[60px]" v-if="form">
<el-image :src="form.photo || config.subpageBanner"></el-image>
</div> </div>
<div class="container"> <div class="container">
<div v-if="form" class="flex flex-col w-[1280px] m-auto"> <div v-if="form" class="flex flex-col w-[1280px] m-auto">
@ -15,6 +15,8 @@
</div> </div>
</div> </div>
</div> </div>
{{ config }}
{{ token }}
<div v-if="!form"> <div v-if="!form">
<el-empty description="404 页面不存在"></el-empty> <el-empty description="404 页面不存在"></el-empty>
</div> </div>
@ -23,11 +25,15 @@
import type {Design} from "~/api/cms/design/model"; import type {Design} from "~/api/cms/design/model";
import type {ApiResult} from "~/api"; import type {ApiResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest"; import {useServerRequest} from "~/composables/useServerRequest";
import {useConfigInfo, useToken} from "~/composables/configState";
const route = useRoute(); const route = useRoute();
const { query, params } = route; const { query, params } = route;
const { custom: pageName} = params; const { custom: pageName} = params;
// 网站配置信息
const config = useConfigInfo();
const token = useToken();
// 页面信息 // 页面信息
const form = ref<Design | any>(); const form = ref<Design | any>();

3
pages/demo/[name].vue
View File

@ -9,6 +9,9 @@
<el-breadcrumb-item>{{ form.goodsName }}</el-breadcrumb-item> <el-breadcrumb-item>{{ form.goodsName }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div class="bg-white p-3 mt-3 flex items-center justify-between"> <div class="bg-white p-3 mt-3 flex items-center justify-between">
<div class="left flex gap-xs items-center"> <div class="left flex gap-xs items-center">
<el-avatar shape="square" :size="55" /> <el-avatar shape="square" :size="55" />

6
pages/index.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div class="banner " v-if="banner">
<div class="banner" v-if="banner">
<el-carousel :interval="5000" arrow="always" :height="banner?.height ? `${banner?.height}px` : 'px'"> <el-carousel :interval="5000" arrow="always" :height="banner?.height ? `${banner?.height}px` : 'px'">
<el-carousel-item>
<video :autoplay="true" loop="" muted="" id="video" class="video"><source src="https://www.algig.cn/upload/media/2022/07/07/5ebe65d7280e4e0c947f4207646d75c4.mp4" type="video/mp4"></video>
</el-carousel-item>
<el-carousel-item v-for="item in banner.data" :key="item.uid"> <el-carousel-item v-for="item in banner.data" :key="item.uid">
<nuxt-link v-if="item.path" :to="item.path"> <nuxt-link v-if="item.path" :to="item.path">
<el-image :src="item.url" style="width: 100%" fit="cover"/> <el-image :src="item.url" style="width: 100%" fit="cover"/>
@ -107,6 +110,7 @@ const reload = async () => {
const getSlide = useServerRequest<ApiResult<AdItem[]>>('/cms/ad/side'); const getSlide = useServerRequest<ApiResult<AdItem[]>>('/cms/ad/side');
const getLink = useServerRequest<ApiResult<Link[]>>('/oa/link?linkType=友情链接'); const getLink = useServerRequest<ApiResult<Link[]>>('/oa/link?linkType=友情链接');
const [{data: slide}, {data: link}] = await Promise.all([getSlide, getLink]); const [{data: slide}, {data: link}] = await Promise.all([getSlide, getLink]);
console.log(slide.value)
banner.value = slide.value?.data; banner.value = slide.value?.data;
links.value = link.value?.data; links.value = link.value?.data;
} }

31
pages/test.vue
View File

@ -0,0 +1,31 @@
<script setup lang="ts">
</script>
<template>
<div class="p-20 pt-[200px]">
<el-dropdown>
<span class="el-dropdown-link">
Dropdown List
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-tag type="primary">Tag 1</el-tag>
</div>
</template>
<style scoped lang="scss">
</style>

12
types/config.ts
View File

@ -0,0 +1,12 @@
export interface Config {
tel1?: string;
icpNo?: string;
tel2?: string;
copyright?: string;
qrcode?: string;
domain?: string;
siteName?: string;
siteLogo?: string;
subpageBanner?: string;
bottomBg?: string;
}

52
utils/common.ts
View File

@ -0,0 +1,52 @@
/**需要进行持久化的数据：把需要持久化的数据放在下面这个对象中，才会持久化，不需要持久化的数据就不用放到这里了。 */
const enduring: { [key: string]: () => Ref<any> } = {
useToken, useConfigInfo
}
//下面的俩函数在app.vue的onMounted中统一调用，或者在其它情况挂载后单独调用。
/**把所有指定数据保存到本地存储
* @param key 要保存的数据名。不填的话就是保存全部（一般不填，统一在页面关闭时保存。如果是特别重要的数据，就时不时单独保存一下即可。）
*/
export const setLocal = (key?: string) => {
if (key) {
console.log('只保存', key);
const useKey = 'use' + key.slice(0, 1).toUpperCase() + key.slice(1).toLowerCase(); //首字母大写，其它全部转小写
const func = enduring[useKey];
if (!func) {
console.log('没有找到', useKey, '对应的函数');
return;
}
localStorage.setItem(key, JSON.stringify(func().value));
} else {
console.log('正在保存全部数据');
for (const key in enduring) {
if (Object.prototype.hasOwnProperty.call(enduring, key)) {
const element = enduring[key];
const setKey = key.toLowerCase().substring(3); //去掉前面的use ，其它全部转小写
try {
localStorage.setItem(setKey, JSON.stringify(element().value));
} catch (error) {
console.log(`在设置${setKey}的数据时出现错误`, error);
}
}
}
}
};
/**从本地存储获取数据到state中 */
export const getLoacl = () => {
for (const key in enduring) {
if (Object.prototype.hasOwnProperty.call(enduring, key)) {
const element = enduring[key];
const setKey = key.toLowerCase().substring(3); //去掉前面的use ，其它全部转小写
try {
const localData = localStorage.getItem(setKey) || '';
if (localData) {
element().value = JSON.parse(localData);
console.log(setKey, '的本地存储数据获取成功', element().value);
}
} catch (error) {
console.log(`在获取${setKey}的数据时出现错误`, error);
}
}
}
};

88
utils/request.ts
View File

@ -0,0 +1,88 @@
/**
* axios 实例
*/
import axios from 'axios';
import type { AxiosResponse } from 'axios';
import {API_BASE_URL, TOKEN_HEADER_NAME, LAYOUT_PATH, TOKEN_STORE_NAME} from '@/config';
import type { ApiResult } from '@/api';
import { getHostname, getTenantId } from '@/utils/domain';
const service = axios.create({
baseURL: API_BASE_URL
});
/**
* 添加请求拦截器
*/
service.interceptors.request.use(
(config) => {
const TENANT_ID = localStorage.getItem('TenantId') || 5;
const token = localStorage.getItem(TOKEN_STORE_NAME);
// 添加 token 到 header
if (token && config.headers) {
config.headers.common[TOKEN_HEADER_NAME] = token;
}
// 获取租户ID
if (config.headers) {
// 附加企业ID
const companyId = localStorage.getItem('CompanyId');
if (companyId) {
config.headers.common['CompanyId'] = companyId;
}
// 通过网站域名获取租户ID
if (getHostname()) {
config.headers.common['Domain'] = getHostname();
}
// 解析二级域名获取租户ID
if (getTenantId()) {
config.headers.common['TenantId'] = getTenantId();
return config;
}
if (TENANT_ID) {
config.headers.common['TenantId'] = TENANT_ID;
return config;
}
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
/**
* 添加响应拦截器
*/
service.interceptors.response.use(
(res: AxiosResponse<ApiResult<unknown>>) => {
// 登录过期处理
if (res.data?.code === 401) {
// const currentPath = unref(router.currentRoute).path;
// if (currentPath == LAYOUT_PATH) {
// logout(true);
// } else {
// Modal.destroyAll();
// Modal.info({
// title: '系统提示',
// content: '登录状态已过期, 请退出重新登录!',
// okText: '重新登录',
// onOk: () => {
// logout(false, currentPath);
// }
// });
// }
// return Promise.reject(new Error(res.data.message));
}
// token 自动续期
const token = res.headers[TOKEN_HEADER_NAME.toLowerCase()];
if (token) {
localStorage.setItem(TOKEN_STORE_NAME, token);
}
return res;
},
(error) => {
return Promise.reject(error);
}
);
export default service;
Write Preview
Loading…
Cancel
Save