初始化项目
This commit is contained in:
@@ -1,19 +1,18 @@
|
||||
<template>
|
||||
<a-list :class="prefixCls" bordered :pagination="getPagination">
|
||||
<template v-for="item in getData" :key="item.id">
|
||||
<a-list-item class="list-item" v-if="!item.titleDelete">
|
||||
<a-list-item class="list-item" v-if="item.titleDelete != '1'">
|
||||
<a-list-item-meta @click="handleTitleClick(item)">
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<a-typography-paragraph
|
||||
style="width: 100%; margin-bottom: 0 !important"
|
||||
:style="{ cursor: isTitleClickable ? 'pointer' : '' }"
|
||||
:delete="!!item.titleDelete"
|
||||
:ellipsis="
|
||||
$props.titleRows && $props.titleRows > 0 ? { rows: $props.titleRows, tooltip: !!item.title } : false
|
||||
"
|
||||
:content="item.title"
|
||||
/>
|
||||
<a-tooltip :title="item.title" placement="topLeft">
|
||||
<span
|
||||
class="title-text"
|
||||
:style="{ cursor: isTitleClickable ? 'pointer' : 'default' }"
|
||||
:class="{ 'title-delete': item.titleDelete == '1' }"
|
||||
>{{ item.title }}</span
|
||||
>
|
||||
</a-tooltip>
|
||||
<div class="extra" v-if="item.extra">
|
||||
<a-tag class="tag" :color="item.color">
|
||||
{{ item.extra }}
|
||||
@@ -23,30 +22,17 @@
|
||||
</template>
|
||||
|
||||
<template #avatar>
|
||||
<a-avatar v-if="item.avatar && item.avatar.indexOf('://') != -1" class="avatar" :src="item.avatar" />
|
||||
<a-avatar v-else-if="item.avatar && item.avatar.indexOf(':') != -1" class="avatar avatar-icon">
|
||||
<Icon :icon="item.avatar" />
|
||||
</a-avatar>
|
||||
<span v-else> {{ item.avatar }}</span>
|
||||
<a-avatar class="avatar" :src="item.avatar" />
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<div>
|
||||
<div class="description" v-if="item.description">
|
||||
<a-typography-paragraph
|
||||
style="width: 100%; margin-bottom: 0 !important"
|
||||
:ellipsis="
|
||||
$props.descRows && $props.descRows > 0
|
||||
? { rows: $props.descRows, tooltip: !!item.description }
|
||||
: false
|
||||
"
|
||||
:content="item.description"
|
||||
/>
|
||||
</div>
|
||||
<div class="datetime">
|
||||
{{ item.datetime }}
|
||||
</div>
|
||||
</div>
|
||||
<a-tooltip v-if="item.description" placement="topLeft">
|
||||
<template #title>
|
||||
<span v-html="item.description"></span>
|
||||
</template>
|
||||
<div class="description" v-html="item.description"></div>
|
||||
</a-tooltip>
|
||||
<div class="datetime">{{ item.datetime }}</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
@@ -55,73 +41,82 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType, ref, watch, unref } from 'vue';
|
||||
import { ListItem } from './data';
|
||||
import { MyNoticeTodo, TabItem } from '@jeesite/biz/api/biz/myNoticeTodo';
|
||||
import { useDesign } from '@jeesite/core/hooks/web/useDesign';
|
||||
import { List, Avatar, Tag, Typography } from 'ant-design-vue';
|
||||
import { List, Avatar, Tag, Tooltip } from 'ant-design-vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { isNumber } from '@jeesite/core/utils/is';
|
||||
|
||||
function toNumber(value: unknown, defaultValue = 0) {
|
||||
if (isNumber(value)) return value;
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : defaultValue;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Avatar.name as string]: Avatar,
|
||||
[List.name as string]: List,
|
||||
[List.Item.name as string]: List.Item,
|
||||
AListItemMeta: List.Item.Meta,
|
||||
ATypographyParagraph: Typography.Paragraph,
|
||||
[Tag.name as string]: Tag,
|
||||
[Tooltip.name as string]: Tooltip,
|
||||
Icon,
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array as PropType<ListItem[]>,
|
||||
type: Array as PropType<MyNoticeTodo[]>,
|
||||
default: () => [],
|
||||
},
|
||||
pageSize: {
|
||||
type: [Boolean, Number] as PropType<boolean | number>,
|
||||
type: [Boolean, Number, String] as PropType<boolean | number | string>,
|
||||
default: 5,
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
type: [Number, String] as PropType<number | string>,
|
||||
default: 1,
|
||||
},
|
||||
titleRows: {
|
||||
type: Number,
|
||||
type: [Number, String] as PropType<number | string>,
|
||||
default: 1,
|
||||
},
|
||||
descRows: {
|
||||
type: Number,
|
||||
type: [Number, String] as PropType<number | string>,
|
||||
default: 2,
|
||||
},
|
||||
onTitleClick: {
|
||||
type: Function as PropType<(Recordable) => void>,
|
||||
type: Function as PropType<(item: Recordable) => void>,
|
||||
},
|
||||
},
|
||||
emits: ['update:currentPage'],
|
||||
setup(props, { emit }) {
|
||||
const { prefixCls } = useDesign('header-notify-list');
|
||||
const current = ref(props.currentPage || 1);
|
||||
const getData = computed<ListItem[]>(() => {
|
||||
const current = ref(toNumber(props.currentPage, 1));
|
||||
const getTitleRows = computed(() => toNumber(props.titleRows, 1));
|
||||
const getDescRows = computed(() => toNumber(props.descRows, 2));
|
||||
const getData = computed<MyNoticeTodo[]>(() => {
|
||||
const { pageSize, list } = props;
|
||||
if (pageSize === false) return [];
|
||||
let size = isNumber(pageSize) ? pageSize : 5;
|
||||
const size = toNumber(pageSize, 5);
|
||||
return list.slice(size * (unref(current) - 1), size * unref(current));
|
||||
});
|
||||
watch(
|
||||
() => props.currentPage,
|
||||
(v) => {
|
||||
current.value = v;
|
||||
current.value = toNumber(v, 1);
|
||||
},
|
||||
);
|
||||
const isTitleClickable = computed(() => !!props.onTitleClick);
|
||||
const getPagination = computed(() => {
|
||||
const { list, pageSize } = props;
|
||||
if ((pageSize as number) > 0 && list && list.length > (pageSize as number)) {
|
||||
const size = toNumber(pageSize, 5);
|
||||
if (size > 0 && list && list.length > size) {
|
||||
return {
|
||||
total: list.length,
|
||||
pageSize,
|
||||
pageSize: size,
|
||||
size: 'small',
|
||||
current: unref(current),
|
||||
onChange(page) {
|
||||
onChange(page: number) {
|
||||
current.value = page;
|
||||
emit('update:currentPage', page);
|
||||
},
|
||||
@@ -131,11 +126,19 @@
|
||||
}
|
||||
});
|
||||
|
||||
function handleTitleClick(item: ListItem) {
|
||||
function handleTitleClick(item: MyNoticeTodo) {
|
||||
props.onTitleClick && props.onTitleClick(item);
|
||||
}
|
||||
|
||||
return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable };
|
||||
return {
|
||||
prefixCls,
|
||||
getPagination,
|
||||
getData,
|
||||
handleTitleClick,
|
||||
isTitleClickable,
|
||||
getTitleRows,
|
||||
getDescRows,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -174,11 +177,26 @@
|
||||
.title {
|
||||
margin-bottom: 3px;
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.title-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
|
||||
&.title-delete {
|
||||
text-decoration: line-through;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.extra {
|
||||
float: right;
|
||||
margin-top: -22px;
|
||||
margin-right: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
font-weight: normal;
|
||||
|
||||
.tag {
|
||||
@@ -198,6 +216,17 @@
|
||||
.description {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
* {
|
||||
display: inline;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.datetime {
|
||||
|
||||
@@ -1,196 +0,0 @@
|
||||
export interface ListItem {
|
||||
id: string;
|
||||
avatar: string;
|
||||
// 通知的标题内容
|
||||
title: string;
|
||||
// 是否在标题上显示删除线
|
||||
titleDelete?: boolean;
|
||||
datetime?: string;
|
||||
type: string;
|
||||
read?: boolean;
|
||||
description: string;
|
||||
clickClose?: boolean;
|
||||
extra?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export interface TabItem {
|
||||
key: string;
|
||||
name: string;
|
||||
count?: number;
|
||||
btnHref?: string;
|
||||
btnText?: string;
|
||||
list: ListItem[];
|
||||
unreadlist?: ListItem[];
|
||||
}
|
||||
|
||||
export const tabListData: TabItem[] = [
|
||||
{
|
||||
key: '1',
|
||||
name: '通知',
|
||||
list: [
|
||||
{
|
||||
id: '000000001',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
|
||||
title: '你收到了 10 份新周报',
|
||||
description: '',
|
||||
datetime: '2022-08-09',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000002',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
|
||||
title: '你推荐的果汁已通过第三轮面试',
|
||||
description: '',
|
||||
datetime: '2022-08-08',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000003',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
|
||||
title: '这种模板可以区分多种通知类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
// read: true,
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000004',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000005',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title:
|
||||
'标题可以设置自动显示省略号，本例中标题行数已设为1行，如果内容超过1行将自动截断并支持tooltip显示完整标题。',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000006',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000007',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000008',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000009',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
{
|
||||
id: '000000010',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
|
||||
title: '左侧图标用于区分不同的类型',
|
||||
description: '',
|
||||
datetime: '2022-08-07',
|
||||
type: '1',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '消息',
|
||||
list: [
|
||||
{
|
||||
id: '000000006',
|
||||
avatar: 'ant-design:message-outlined',
|
||||
title: '彩虹 评论了你',
|
||||
description: '描述信息描述信息描述信息',
|
||||
datetime: '2022-08-07',
|
||||
type: '2',
|
||||
clickClose: true,
|
||||
},
|
||||
{
|
||||
id: '000000007',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
|
||||
title: '果汁 回复了你',
|
||||
description: '这种模板用于提醒谁与你发生了互动',
|
||||
datetime: '2022-08-07',
|
||||
type: '2',
|
||||
clickClose: true,
|
||||
},
|
||||
{
|
||||
id: '000000008',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
|
||||
title: '标题',
|
||||
description:
|
||||
'请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容',
|
||||
datetime: '2022-08-07',
|
||||
type: '2',
|
||||
clickClose: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '待办',
|
||||
list: [
|
||||
{
|
||||
id: '000000009',
|
||||
avatar: '',
|
||||
title: '任务名称',
|
||||
description: '任务需要在 2022-01-12 20:00 前启动',
|
||||
datetime: '',
|
||||
extra: '未开始',
|
||||
color: '',
|
||||
type: '3',
|
||||
},
|
||||
{
|
||||
id: '000000010',
|
||||
avatar: '',
|
||||
title: '第三方紧急代码变更',
|
||||
description: '彩虹 需在 2022-01-07 前完成代码变更任务',
|
||||
datetime: '',
|
||||
extra: '马上到期',
|
||||
color: 'red',
|
||||
type: '3',
|
||||
},
|
||||
{
|
||||
id: '000000011',
|
||||
avatar: '',
|
||||
title: '信息安全考试',
|
||||
description: '指派竹尔于 2022-01-09 前完成更新并发布',
|
||||
datetime: '',
|
||||
extra: '已耗时 8 天',
|
||||
color: 'gold',
|
||||
type: '3',
|
||||
},
|
||||
{
|
||||
id: '000000012',
|
||||
avatar: '',
|
||||
title: 'ABCD 版本发布',
|
||||
description: '指派竹尔于 2022-01-09 前完成更新并发布',
|
||||
datetime: '',
|
||||
extra: '进行中',
|
||||
color: 'blue',
|
||||
type: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -12,9 +12,7 @@
|
||||
{{ item.name }}
|
||||
<span v-if="item.list.length !== 0">({{ item.list.length }})</span>
|
||||
</template>
|
||||
<!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
|
||||
<NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
|
||||
<NoticeList :list="item.list" v-else />
|
||||
<NoticeList :list="item.list" />
|
||||
</TabPane>
|
||||
</template>
|
||||
</Tabs>
|
||||
@@ -23,41 +21,54 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref } from 'vue';
|
||||
import { computed, defineComponent, onMounted, ref } from 'vue';
|
||||
import { Popover, Tabs, Badge } from 'ant-design-vue';
|
||||
import { BellOutlined } from '@ant-design/icons-vue';
|
||||
import { tabListData, ListItem } from './data';
|
||||
import NoticeList from './NoticeList.vue';
|
||||
import { useDesign } from '@jeesite/core/hooks/web/useDesign';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { MyNoticeTodo, TabItem, tabListDataAll } from '@jeesite/biz/api/biz/myNoticeTodo';
|
||||
|
||||
import { useUserStore } from '@jeesite/core/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userinfo = computed(() => userStore.getUserInfo);
|
||||
|
||||
export default defineComponent({
|
||||
components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList },
|
||||
setup() {
|
||||
const { prefixCls } = useDesign('header-notify');
|
||||
const { createMessage } = useMessage();
|
||||
const listData = ref(tabListData);
|
||||
|
||||
const count = computed(() => {
|
||||
let count = 0;
|
||||
for (let i = 0; i < tabListData.length; i++) {
|
||||
count += tabListData[i].list.length;
|
||||
const listData = ref<TabItem[]>([]);
|
||||
|
||||
const getDataList = async () => {
|
||||
try {
|
||||
const reqParams = {
|
||||
loginUser: userinfo.value.loginCode,
|
||||
}
|
||||
const result = await tabListDataAll(reqParams);
|
||||
listData.value = result || [];
|
||||
} catch (error) {
|
||||
listData.value = [];
|
||||
}
|
||||
return count;
|
||||
});
|
||||
|
||||
function onNoticeClick(record: ListItem) {
|
||||
createMessage.success('你点击了通知，ID=' + record.id);
|
||||
// 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
|
||||
record.titleDelete = !record.titleDelete;
|
||||
}
|
||||
|
||||
const count = computed(() => {
|
||||
let count = 0;
|
||||
for (let i = 0; i < listData.value.length; i++) {
|
||||
count += listData.value[i].list.length;
|
||||
}
|
||||
return count;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
});
|
||||
return {
|
||||
prefixCls,
|
||||
listData,
|
||||
count,
|
||||
onNoticeClick,
|
||||
numberStyle: {},
|
||||
getDataList,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,114 +1,101 @@
|
||||
<template>
|
||||
<PageWrapper title="关于">
|
||||
<PageWrapper>
|
||||
<template #headerContent>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex-1">
|
||||
<a href="https://jeesite.com" target="_blank">JeeSite</a>
|
||||
快速开发平台，不仅仅是一个后台开发框架，它是一个企业级快速开发解决方案，有平台来封装技术细节，
|
||||
让开发者更专注业务，降低软件的开发难度。平台基于经典组合 Spring Boot、Apache MyBatis，
|
||||
前端采用：Vue3、Vite、Monorepo、Ant-Design-Vue、TypeScript、
|
||||
<a href="https://github.com/anncwb/vue-vben-admin" target="_blank">Vue Vben Admin</a>，
|
||||
最先进的技术栈，让初学者能够更快的入门并投入到团队开发中去。
|
||||
提供在线代码生成功能，包括模块如：组织机构、角色用户、菜单及按钮授权、数据权限、系统参数、内容管理、工作流等。
|
||||
众多账号安全设置，密码策略；文件在线预览；消息推送；多元化第三方登录；在线定时任务配置；支持集群，支持SAAS；
|
||||
支持多数据源；支持读写分离、分库分表；支持 Spring Cloud 分布式微服务应用架构。
|
||||
强大的组件封装，数据驱动视图。为微小中大型项目的开发，提供现成的开箱解决方案及丰富的示例。
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<Description @register="infoRegister" class="enter-y" />
|
||||
<Description @register="register" class="enter-y my-4" />
|
||||
<Description @register="registerDev" class="enter-y" />
|
||||
<div class="jeesite-workbench">
|
||||
<div class="workbench-layout">
|
||||
<div class="workbench-top">10% 区域</div>
|
||||
<div class="workbench-row">
|
||||
<div class="workbench-col">30% 区域左侧</div>
|
||||
<div class="workbench-col">30% 区域右侧</div>
|
||||
</div>
|
||||
<div class="workbench-row">
|
||||
<div class="workbench-col">30% 区域左侧</div>
|
||||
<div class="workbench-col">30% 区域右侧</div>
|
||||
</div>
|
||||
<div class="workbench-row">
|
||||
<div class="workbench-col">30% 区域左侧</div>
|
||||
<div class="workbench-col">30% 区域右侧</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup name="AboutPage">
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
<script lang="ts" setup name="Workbench">
|
||||
import { ref } from 'vue';
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import { Description, DescItem, useDescription } from '@jeesite/core/components/Description';
|
||||
|
||||
const { pkg, lastBuildTime } = __APP_INFO__;
|
||||
|
||||
const { dependencies, devDependencies, version } = pkg;
|
||||
|
||||
const schema: DescItem[] = [];
|
||||
const devSchema: DescItem[] = [];
|
||||
|
||||
const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal);
|
||||
const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text);
|
||||
|
||||
const infoSchema: DescItem[] = [
|
||||
{
|
||||
label: '版本',
|
||||
field: 'version',
|
||||
render: commonTagRender('blue'),
|
||||
},
|
||||
{
|
||||
label: '最后编译时间',
|
||||
field: 'lastBuildTime',
|
||||
render: commonTagRender('blue'),
|
||||
},
|
||||
{
|
||||
label: '文档地址',
|
||||
field: 'docs',
|
||||
render: commonLinkRender('http://docs.jeesite.com'),
|
||||
},
|
||||
{
|
||||
label: '官方网站',
|
||||
field: 'website',
|
||||
render: commonLinkRender('https://jeesite.com'),
|
||||
},
|
||||
{
|
||||
label: '下载地址',
|
||||
field: 'download',
|
||||
render: commonLinkRender('https://gitee.com/thinkgem'),
|
||||
},
|
||||
{
|
||||
label: '联系我',
|
||||
field: 'linkers',
|
||||
render: commonLinkRender('http://s.jeesite.com'),
|
||||
},
|
||||
];
|
||||
|
||||
const infoData = {
|
||||
version,
|
||||
lastBuildTime,
|
||||
docs: 'http://docs.jeesite.com',
|
||||
website: 'https://jeesite.com',
|
||||
download: 'https://gitee.com/thinkgem',
|
||||
linkers: 'http://s.jeesite.com',
|
||||
};
|
||||
|
||||
const [infoRegister] = useDescription({
|
||||
title: '项目信息',
|
||||
data: infoData,
|
||||
schema: infoSchema,
|
||||
column: 2,
|
||||
});
|
||||
|
||||
let register: any;
|
||||
if (dependencies) {
|
||||
Object.keys(dependencies).forEach((key) => {
|
||||
schema.push({ field: key, label: key });
|
||||
});
|
||||
register = useDescription({
|
||||
title: '生产环境依赖',
|
||||
data: dependencies,
|
||||
schema: schema,
|
||||
column: 3,
|
||||
})[0];
|
||||
}
|
||||
|
||||
let registerDev: any;
|
||||
if (devDependencies) {
|
||||
Object.keys(devDependencies).forEach((key) => {
|
||||
devSchema.push({ field: key, label: key });
|
||||
});
|
||||
registerDev = useDescription({
|
||||
title: '开发环境依赖',
|
||||
data: devDependencies,
|
||||
schema: devSchema,
|
||||
column: 3,
|
||||
})[0];
|
||||
}
|
||||
const loading = ref(true);
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 800);
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@dark-bg: #141414;
|
||||
|
||||
.jeesite-workbench {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.jeesite-workbench .workbench-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.jeesite-workbench .workbench-top {
|
||||
flex: 0 0 10%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.jeesite-workbench .workbench-row {
|
||||
display: flex;
|
||||
flex: 0 0 30%;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.jeesite-workbench .workbench-col,
|
||||
.jeesite-workbench .workbench-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
background: #FFFFFF;
|
||||
color: rgb(71 85 105);
|
||||
}
|
||||
|
||||
.jeesite-workbench .workbench-col {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-workbench,
|
||||
html[data-theme='dark'] .jeesite-workbench .workbench-layout,
|
||||
html[data-theme='dark'] .jeesite-workbench .workbench-row {
|
||||
background: @dark-bg !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-workbench .workbench-top,
|
||||
html[data-theme='dark'] .jeesite-workbench .workbench-col {
|
||||
border-color: rgb(51 65 85);
|
||||
background: @dark-bg !important;
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="jeesite-analysis">
|
||||
<div class="mySpring-analysis">
|
||||
<div class="analysis-layout">
|
||||
<div class="analysis-left">
|
||||
<section class="analysis-panel">左上</section>
|
||||
@@ -17,20 +17,19 @@
|
||||
<style lang="less">
|
||||
@dark-bg: #141414;
|
||||
|
||||
.jeesite-analysis .ant-card {
|
||||
.mySpring-analysis .ant-card {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.jeesite-analysis {
|
||||
.mySpring-analysis {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.jeesite-analysis .analysis-layout {
|
||||
.mySpring-analysis .analysis-layout {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -43,8 +42,8 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.jeesite-analysis .analysis-left,
|
||||
.jeesite-analysis .analysis-right {
|
||||
.mySpring-analysis .analysis-left,
|
||||
.mySpring-analysis .analysis-right {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
@@ -53,17 +52,17 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.jeesite-analysis .analysis-left {
|
||||
.mySpring-analysis .analysis-left {
|
||||
flex: 2 1 0;
|
||||
grid-template-rows: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.jeesite-analysis .analysis-right {
|
||||
.mySpring-analysis .analysis-right {
|
||||
flex: 3 1 0;
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.jeesite-analysis .analysis-panel {
|
||||
.mySpring-analysis .analysis-panel {
|
||||
min-height: 0;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
@@ -76,26 +75,26 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-analysis .analysis-panel {
|
||||
html[data-theme='dark'] .mySpring-analysis .analysis-panel {
|
||||
border-color: rgb(51 65 85);
|
||||
background: @dark-bg !important;
|
||||
color: rgb(203 213 225);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-analysis,
|
||||
html[data-theme='dark'] .jeesite-analysis .analysis-layout,
|
||||
html[data-theme='dark'] .jeesite-analysis .analysis-left,
|
||||
html[data-theme='dark'] .jeesite-analysis .analysis-right {
|
||||
html[data-theme='dark'] .mySpring-analysis,
|
||||
html[data-theme='dark'] .mySpring-analysis .analysis-layout,
|
||||
html[data-theme='dark'] .mySpring-analysis .analysis-left,
|
||||
html[data-theme='dark'] .mySpring-analysis .analysis-right {
|
||||
background: @dark-bg !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-analysis {
|
||||
html[data-theme='dark'] .mySpring-analysis {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .jeesite-analysis,
|
||||
html[data-theme='dark'] .jeesite-analysis * {
|
||||
html[data-theme='dark'] .mySpring-analysis,
|
||||
html[data-theme='dark'] .mySpring-analysis * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user