From 4ef0905061c053a1aad71dbda573b5b293a4d569 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=A8=9C?= Date: Fri, 18 Apr 2025 16:26:06 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9B=A2=E9=98=9F=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/main.ts | 3 +- src/router/index.ts | 28 ++- src/store/index.ts | 2 + src/store/modules/group.ts | 34 ++++ src/styles/group.scss | 245 +++++++++++++++++++++++++++ src/styles/knowledgeFile.scss | 4 +- src/styles/knowledgeFileSection.scss | 5 +- src/styles/knowledgeLibrary.scss | 18 +- src/styles/reset.scss | 4 +- src/views/group/data.js | 3 + src/views/group/index.vue | 191 +++++++++++++++++++++ src/views/login/index.vue | 2 +- 13 files changed, 515 insertions(+), 25 deletions(-) create mode 100644 src/store/modules/group.ts create mode 100644 src/styles/group.scss create mode 100644 src/views/group/data.js create mode 100644 src/views/group/index.vue diff --git a/package.json b/package.json index ab97dd9..3ebe5ff 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.2", "pinia": "^2.2.2", + "pinia-plugin-persistedstate": "^4.2.0", "qs": "^6.13.0", "sortablejs": "^1.15.2", "uuid": "^10.0.0", diff --git a/src/main.ts b/src/main.ts index 7b71c80..4b9c52a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -19,10 +19,11 @@ import '@/styles/index.scss'; import 'uno.css'; import 'animate.css'; import router from './router'; +import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'; const app = createApp(App); -app.use(createPinia()); +app.use(createPinia().use(piniaPluginPersistedstate)); app.use(router); app.use(ElementPlus, { locale: zhCn, diff --git a/src/router/index.ts b/src/router/index.ts index 7e05ad4..8df835e 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -14,8 +14,27 @@ export const constantRoutes: RouteRecordRaw[] = [ meta: { hidden: true }, }, { - path: '/NotFoundPage', - component: () => import('@/views/notFoundPage/index.vue'), + path: '/group', + name: 'Group', + component: () => import('@/views/group/index.vue'), + meta: { hidden: true }, + }, + { + path: '/groupInfo', + name: 'GroupInfo', + component: () => import('@/views/group/groupInfo.vue'), + meta: { hidden: true }, + }, + { + path: '/libraryInfo', + name: 'libraryInfo', + component: () => import('@/views/knowledgeLibrary/libraryInfo.vue'), + meta: { hidden: true }, + }, + { + path: '/documentInfo', + name: 'documentInfo', + component: () => import('@/views/knowledgeFile/documentInfo.vue'), meta: { hidden: true }, }, { @@ -33,6 +52,11 @@ export const constantRoutes: RouteRecordRaw[] = [ component: () => import('@/views/knowledgeFileSection/index.vue'), meta: { hidden: true }, }, + { + path: '/NotFoundPage', + component: () => import('@/views/notFoundPage/index.vue'), + meta: { hidden: true }, + }, { path: '/:catchAll(.*)', redirect: '/NotFoundPage', diff --git a/src/store/index.ts b/src/store/index.ts index e2308cd..7e215a8 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,7 +1,9 @@ import type { App } from 'vue'; import { createPinia } from 'pinia'; +import piniaPersist from 'pinia-plugin-persistedstate'; const store = createPinia(); +store.use(piniaPersist); // 全局注册 store export function setupStore(app: App) { diff --git a/src/store/modules/group.ts b/src/store/modules/group.ts new file mode 100644 index 0000000..38c3e26 --- /dev/null +++ b/src/store/modules/group.ts @@ -0,0 +1,34 @@ +import { store } from '@/store'; + +export const useGroupStore = defineStore( + 'group', + () => { + let navGroup = ref([{ name: '数据治理', path: '/group', query: {} }]); + let groupMenu = ref('knowledge'); + + let handleSwitchMenu = (menu: string) => { + groupMenu.value = menu; + }; + let delNav = (value: number) => { + navGroup.value.splice(value); + }; + return { + navGroup, + groupMenu, + handleSwitchMenu, + delNav, + }; + }, + { + // 持久化存储 + persist: { + key: 'group_data', + storage: sessionStorage, + pick: ['navGroup', 'groupMenu'], + }, + } +); + +export function useGroupStoreHook() { + return useGroupStore(store); +} diff --git a/src/styles/group.scss b/src/styles/group.scss new file mode 100644 index 0000000..a751819 --- /dev/null +++ b/src/styles/group.scss @@ -0,0 +1,245 @@ +.group-container { + width: 100%; + height: calc(100vh - 300px); + padding: 0 24px 24px; + background: rgb(239 239 239); + min-width: 820px; + + .group-box { + box-sizing: border-box; + display: flex; + flex-direction: column; + width: 100%; + height: calc(100vh - 319px); + padding-bottom: 24px; + overflow-y: auto; + background: rgb(253 254 255); + border-radius: 4px; + transform: translateY(-40px); + .el-tabs--border-card{ + border: none; + } + .group-tabs { + .group-tabs-item { + .group-tab-header{ + display: flex; + justify-content: space-between; + .group-btn{ + border-radius: 4px !important; + width: 96px; + background-color: rgb(99,149,253); + } + .group-right-btn { + display: flex; + gap: 8px; + + .group-btn-search { + width: 400px; + height: 32px; + + .el-input__icon { + font-size: 16px; + } + + .el-input__inner { + font-size: 12px !important; + line-height: 16px; + } + + .el-input__wrapper { + padding-right: 8px !important; + } + } + + .group-btn-switch { + box-sizing: border-box; + display: flex; + align-items: center; + width: 64px; + height: 32px; + border: 1px solid rgb(195 206 223); + border-radius: 2px; + + .group-btn-switch-icon { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + cursor: pointer; + + .el-icon { + color: #8d98aa; + font-size: 16px !important; + } + } + + .bgThumb { + height: 32px; + background: rgb(99 149 253); + + .el-icon { + color: white; + font-size: 16px !important; + } + } + } + } + } + .group-tabs-content{ + margin-top: 16px; + display: flex; + justify-content: space-between; + display: grid; + grid-template-columns: repeat(auto-fill, 339px); + gap: 16px; + + .group-card-item { + + width: 339px; + height: 124px; + border-radius: 8px; + background-color: rgb(244, 246, 250); + padding: 16px; + cursor: pointer; + + .group-card-title { + display: flex; + justify-content: space-between; + align-items: center; + + .group-card-title-name { + font-size: 16px; + font-weight: 700; + line-height: 24px; + } + + .card-type { + border-radius: 2px; + width: 40px; + height: 16px; + color: white; + text-align: center; + font-size: 12px; + line-height: 16px; + } + + .card-type-public { + background-color: rgb(36, 171, 54); + } + + .card-type-privacy { + background-color: rgb(235, 175, 0); + } + } + + .group-card-desc { + width: 307px; + height: 32px; + font-size: 12px; + line-height: 16px; + color: rgb(78, 88, 101); + margin: 4px 0 16px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + + .group-card-footer { + display: flex; + justify-content: space-between; + align-items: center; + + .info { + font-size: 12px; + color: rgb(141, 152, 170); + } + } + } + } + .group-table-box { + padding: 16px 24px 24px; + height: 100%; + display: flex; + flex-direction: column; + gap: 24px; + min-height: 200px; + + .el-checkbox__inner::before { + top: 4.5px !important; + width: 13px; + } + + tbody { + td { + border-right: unset !important; + } + } + + .el-table.is-scrolling-left.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell { + border-right: unset !important; + } + + .el-table__header { + width: 100% !important; + + height: 32px; + box-shadow: inset 0 -1px 0 0 rgb(223 229 239); + + thead tr th { + background-color: #f4f6fa; + } + } + + .group-name-row { + color: #0077ff; + font-size: 12px; + font-weight: 500; + cursor: pointer; + } + + .group-id { + .el-icon { + color: #8d98aa; + } + } + + .el-table__body { + width: 100% !important; + + .el-table__row { + height: 48px; + } + } + + .el-table__cell { + padding: 0 !important; + font-size: 12px; + } + + .el-table--border .el-table__cell:first-child .cell { + padding: 0 12px !important; + } + + .el-table-column--selection .cell { + padding-right: 0 !important; + padding-left: 22px; + } + + .group-selection::after { + content: unset !important; + } + + .el-pagination { + margin-top: 0; + } + + .el-pagination .el-input__inner { + height: var(--el-input-inner-height) !important; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/knowledgeFile.scss b/src/styles/knowledgeFile.scss index b771b1f..1dc2dc6 100644 --- a/src/styles/knowledgeFile.scss +++ b/src/styles/knowledgeFile.scss @@ -3,8 +3,7 @@ flex-direction: column; gap: 16px; width: 100%; - height: calc(100% - 48px); - padding: 16px 24px 24px; + height: calc(100vh - 220px); min-width: 1240px; .kf-container-top { display: flex; @@ -75,7 +74,6 @@ .kf-container-right { flex: 1; min-width: 700px; - padding: 16px 24px 24px 24px; background: rgb(254 254 254); border-radius: 4px; diff --git a/src/styles/knowledgeFileSection.scss b/src/styles/knowledgeFileSection.scss index db0966d..53975b3 100644 --- a/src/styles/knowledgeFileSection.scss +++ b/src/styles/knowledgeFileSection.scss @@ -4,7 +4,6 @@ gap: 16px; width: 100%; height: 100%; - padding: 16px 24px 24px; min-width: 1240px; .kf-section-container-top { display: flex; @@ -40,14 +39,13 @@ display: flex; gap: 2px; width: 100%; - height: calc(100% - 80px); + height: calc(100vh - 210px); .kf-section-container-left { display: flex; flex-direction: column; gap: 16px; width: 314px; - padding: 24px; background: rgb(254 254 254); border-top-left-radius: 4px; border-bottom-left-radius: 4px; @@ -78,7 +76,6 @@ flex: 1; min-width: 700px; height: 100%; - padding: 24px 0 24px 24px; overflow: hidden; background: rgb(254 254 254); border-top-right-radius: 4px; diff --git a/src/styles/knowledgeLibrary.scss b/src/styles/knowledgeLibrary.scss index bc8f7ae..2a7cc8e 100644 --- a/src/styles/knowledgeLibrary.scss +++ b/src/styles/knowledgeLibrary.scss @@ -1,8 +1,6 @@ .knowledgeLibrary-container { width: 100%; height: calc(100vh - 300px); - padding: 0 24px 24px; - background: rgb(239 239 239); min-width: 820px; .knowledgeLibrary-box { @@ -15,12 +13,9 @@ overflow-y: auto; background: rgb(253 254 255); border-radius: 4px; - transform: translateY(-5px); .kl-tilte { height: 24px; - margin-left: 24px; - margin-top: 24px; font-size: 16px; line-height: 24px; color: rgb(0, 0, 0); @@ -31,7 +26,6 @@ display: flex; justify-content: space-between; width: 100%; - padding: 0 24px; margin-top: 16px; .kl-left-btn { @@ -102,7 +96,7 @@ .bgThumb { height: 32px; - background: rgb(0 119 255); + background: rgb(99,149,253); .el-icon { color: white; @@ -117,20 +111,20 @@ box-sizing: border-box; width: 100%; height: 100%; - padding: 0 16px 24px 24px; margin-top: 16px; - overflow-y: scroll; + overflow-y: auto; } .kl-card { display: flex; flex-wrap: wrap; justify-content: space-between; + gap: 16px; .kl-single-card { display: flex; flex-direction: column; - height: 302px; + height: 232px; padding: 24px; cursor: pointer; background: rgb(244 246 250); @@ -230,7 +224,7 @@ @media screen and (width <=1560px) { .kl-card-container { display: grid; - grid-template-columns: repeat(auto-fill, 350px); + grid-template-columns: repeat(auto-fill, 428px); grid-gap: 16px; } } @@ -238,7 +232,7 @@ @media screen and (width >=1560px) { .kl-card-container { display: grid; - grid-template-columns: repeat(auto-fill, 350px); + grid-template-columns: repeat(auto-fill, 428px); grid-gap: 16px; } } diff --git a/src/styles/reset.scss b/src/styles/reset.scss index d5b775a..c66df44 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -229,11 +229,11 @@ $newHoverBg: linear-gradient( } .el-button--primary, .bgThumb { - background: $newbg !important; + // background: $newbg !important; border-color: #c7d2fbc0 !important; &:hover { color: white !important; - background: $newHoverBg !important; + // background: $newHoverBg !important; border-color: #c7d2fbc0 !important; } } diff --git a/src/views/group/data.js b/src/views/group/data.js new file mode 100644 index 0000000..b8f85d0 --- /dev/null +++ b/src/views/group/data.js @@ -0,0 +1,3 @@ +const groupList = []; + +export { groupList }; diff --git a/src/views/group/index.vue b/src/views/group/index.vue new file mode 100644 index 0000000..961506d --- /dev/null +++ b/src/views/group/index.vue @@ -0,0 +1,191 @@ + + + diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 697cfce..da5cecc 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -404,7 +404,7 @@ const handleLoginSubmit = () => { duration: 3000, }); localStorage.setItem('userInfo', JSON.stringify(res)); - window.open(`${window.origin}/witchaind/#/knowledge/library`, '_self'); + window.open(`${window.origin}/witchaind/#/group`, '_self'); }) .finally(() => { loading.value = false; -- Gitee