diff --git a/frontend/.gitignore b/frontend/.gitignore index a547bf36..3a5aa352 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -6,7 +6,7 @@ yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* - +components.d.ts node_modules dist dist-ssr diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts index 21b8307c..56d36587 100644 --- a/frontend/auto-imports.d.ts +++ b/frontend/auto-imports.d.ts @@ -6,6 +6,6 @@ // biome-ignore lint: disable export {} declare global { - const ElMessage: typeof import('element-plus/es')['ElMessage'] - const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] + const ElMessage: typeof import('element-plus-secondary/es')['ElMessage'] + const ElMessageBox: typeof import('element-plus-secondary/es')['ElMessageBox'] } diff --git a/frontend/package.json b/frontend/package.json index 9ff37c67..bb168570 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -24,12 +24,12 @@ "@vue/tsconfig": "^0.7.0", "axios": "^1.8.4", "crypto-js": "^4.2.0", - "element-plus": "^2.9.7", + "element-plus-secondary": "^1.0.0", "less": "^4.3.0", "pinia": "^3.0.2", "typescript": "~5.7.2", "unplugin-auto-import": "^19.1.2", - "unplugin-vue-components": "^28.5.0", + "unplugin-vue-components-secondary": "^0.24.6", "vite": "^6.3.1", "vite-plugin-svg-icons": "^2.0.1", "vite-svg-loader": "^5.1.0", diff --git a/frontend/src/components/icon-custom/index.ts b/frontend/src/components/icon-custom/index.ts index 4c721be7..fb5a732c 100644 --- a/frontend/src/components/icon-custom/index.ts +++ b/frontend/src/components/icon-custom/index.ts @@ -1,5 +1,5 @@ import { h } from 'vue' -import { ElIcon } from 'element-plus' +import { ElIcon } from 'element-plus-secondary' import Icon from './src/Icon.vue' const hIcon = (name: string) => { return h(ElIcon, null, { diff --git a/frontend/src/components/layout/SinglePage.vue b/frontend/src/components/layout/SinglePage.vue new file mode 100644 index 00000000..e55948f8 --- /dev/null +++ b/frontend/src/components/layout/SinglePage.vue @@ -0,0 +1,11 @@ + + diff --git a/frontend/src/components/layout/index.vue b/frontend/src/components/layout/index.vue index 38c464c9..af27087c 100644 --- a/frontend/src/components/layout/index.vue +++ b/frontend/src/components/layout/index.vue @@ -225,13 +225,13 @@ onMounted(() => { overflow: hidden; .workspace-select { width: 100% !important; - :deep(.el-select__wrapper) { + :deep(.ed-select__wrapper) { border-radius: 10px; box-shadow: none !important; background-color: #f1f3f4; line-height: 32px; min-height: 48px; - .el-select__selected-item { + .ed-select__selected-item { height: 32px; } .workspace-label { @@ -308,7 +308,7 @@ onMounted(() => { display: flex; column-gap: 4px; align-items: center; - .el-avatar { + .ed-avatar { background-color: var(--el-color-primary); color: #fff; } @@ -330,7 +330,7 @@ onMounted(() => { line-height: 54px; .workspace-select { width: 100% !important; - :deep(.el-select__wrapper) { + :deep(.ed-select__wrapper) { border-radius: 10px; box-shadow: none !important; background-color: #f1f3f4; @@ -416,7 +416,7 @@ onMounted(() => { display: flex; column-gap: 4px; align-items: center; - .el-avatar { + .ed-avatar { background-color: var(--el-color-primary); color: #fff; } @@ -467,7 +467,7 @@ onMounted(() => { border-right: 1px solid var(--el-menu-border-color); border-radius: 0; background-color: var(--white); - :deep(.el-menu) { + :deep(.ed-menu) { border: none; } } diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts index 8838ce4b..5bbaa554 100644 --- a/frontend/src/router/index.ts +++ b/frontend/src/router/index.ts @@ -1,112 +1,119 @@ -import { createRouter, createWebHashHistory } from 'vue-router' +import { createRouter, createWebHashHistory } from "vue-router"; -import Layout from '@/components/layout/index.vue' -import login from '@/views/login/index.vue' -import chat from '@/views/chat/index.vue' -import ds from '@/views/ds/index.vue' -import DashboardEditor from '@/views/dashboard/editor/index.vue' -import Dashboard from '@/views/dashboard/index.vue' -import setting from '@/views/setting/index.vue' -import { watchRouter } from './watch' +import Layout from "@/components/layout/index.vue"; +import SinglePage from "@/components/layout/SinglePage.vue"; +import login from "@/views/login/index.vue"; +import chat from "@/views/chat/index.vue"; +import ds from "@/views/ds/index.vue"; +import DashboardEditor from "@/views/dashboard/editor/index.vue"; +import Dashboard from "@/views/dashboard/index.vue"; +import setting from "@/views/setting/index.vue"; +import { watchRouter } from "./watch"; const router = createRouter({ history: createWebHashHistory(), routes: [ { - path: '/login', - name: 'login', - component: login + path: "/login", + name: "login", + component: login, }, { - path: '/chat', + path: "/chat", component: Layout, - redirect: '/chat/index', + redirect: "/chat/index", children: [ { - path: 'index', - name: 'chat', + path: "index", + name: "chat", component: chat, - meta: { title: 'Data Q&A', icon: 'chat' } - } - ] + meta: { title: "Data Q&A", icon: "chat" }, + }, + ], }, { - path: '/ds', - component: Layout, - redirect: '/ds/index', + path: "/dsTable", + component: SinglePage, children: [ { - path: 'index', - name: 'ds', + path: ":dsId/:dsName", + name: "dsTable", + component: () => import("@/views/ds/TableList.vue"), + props: true, + }, + ], + }, + { + path: "/ds", + component: Layout, + redirect: "/ds/index", + children: [ + { + path: "index", + name: "ds", component: ds, - meta: { title: 'Data Connections', icon: 'ds' } + meta: { title: "Data Connections", icon: "ds" }, }, - { - path: 'dsTable/:dsId/:dsName', - name: 'dsTable', - component: () => import('@/views/ds/TableList.vue'), - props: true - } - ] + ], }, { - path: '/dashboard', + path: "/dashboard", component: Layout, - redirect: '/dashboard/index', + redirect: "/dashboard/index", children: [ { - path: 'index', - name: 'dashboard', + path: "index", + name: "dashboard", component: Dashboard, - meta: { title: 'Dashboard', icon: 'dashboard' } - } - ] + meta: { title: "Dashboard", icon: "dashboard" }, + }, + ], }, { - path: '/dashboard-edit', - redirect: '/dashboard-edit/index', + path: "/dashboard-edit", + redirect: "/dashboard-edit/index", component: Layout, children: [ { - path: 'index', - name: 'dashboard-edit', + path: "index", + name: "dashboard-edit", component: DashboardEditor, - meta: { title: 'dashboard-edit', icon: 'dashboard' } - } - ] + meta: { title: "dashboard-edit", icon: "dashboard" }, + }, + ], }, { - path: '/setting', + path: "/setting", component: Layout, - redirect: '/setting/index', + redirect: "/setting/index", children: [ { - path: 'index', - name: 'setting', + path: "index", + name: "setting", component: setting, - meta: { title: 'Settings', icon: 'setting' } - } - ] + meta: { title: "Settings", icon: "setting" }, + }, + ], }, { - path: '/system', + path: "/system", component: Layout, - redirect: '/system/user', + redirect: "/system/user", children: [ { - path: 'user', - name: 'user', - component: () => import('@/views/system/user/index.vue'), - meta: { title: 'User Management', icon: 'icon_user' } + path: "user", + name: "user", + component: () => import("@/views/system/user/index.vue"), + meta: { title: "User Management", icon: "icon_user" }, }, { - path: 'model', - name: 'model', - component: () => import('@/views/system/model/index.vue'), - meta: { title: 'AI Model Configuration', icon: 'icon_ai' } - } - ] - } - ] -}) -watchRouter(router) -export default router \ No newline at end of file + path: "model", + name: "model", + component: () => import("@/views/system/model/index.vue"), + meta: { title: "AI Model Configuration", icon: "icon_ai" }, + }, + ], + }, + ], +}); +watchRouter(router); +export default router; diff --git a/frontend/src/router/watch.ts b/frontend/src/router/watch.ts index b14880cf..b13adfef 100644 --- a/frontend/src/router/watch.ts +++ b/frontend/src/router/watch.ts @@ -1,4 +1,4 @@ -import { ElMessage } from 'element-plus' +import { ElMessage } from 'element-plus-secondary' import { useCache } from '@/utils/useCache' const { wsCache } = useCache() const whiteList = ['/login'] diff --git a/frontend/src/views/dashboard/components/sq-tab/index.vue b/frontend/src/views/dashboard/components/sq-tab/index.vue index a3fb5505..90f8394e 100644 --- a/frontend/src/views/dashboard/components/sq-tab/index.vue +++ b/frontend/src/views/dashboard/components/sq-tab/index.vue @@ -160,7 +160,7 @@ const isEditMode = computed(() => true) \ No newline at end of file + diff --git a/frontend/src/views/ds/form.vue b/frontend/src/views/ds/form.vue index 18370e14..df8620e5 100644 --- a/frontend/src/views/ds/form.vue +++ b/frontend/src/views/ds/form.vue @@ -8,17 +8,30 @@ @closed="close" modal-class="add-datasource_dialog" > - - - - -
- + + +
+ @@ -96,7 +109,7 @@
-
+
Test Connect Next - Preview Save(); const emit = defineEmits(["refresh"]); -const active = ref(1); +const active = ref(0); const isCreate = ref(true); const isEditTable = ref(false); const checkList = ref([]); @@ -199,7 +212,7 @@ const config = ref({ const close = () => { dialogVisible.value = false; isCreate.value = true; - active.value = 1; + active.value = 0; isEditTable.value = false; checkList.value = []; tableList.value = []; @@ -230,7 +243,7 @@ const open = (item: any, editTable: boolean = false) => { } if (editTable) { - active.value = 2; + active.value = 1; isEditTable.value = true; isCreate.value = false; // request tables and check tables @@ -421,8 +434,8 @@ defineExpose({ open }); .add-datasource_dialog { .container { max-height: 600px; - margin-top: 20px; - .el-vl__window.el-select-dropdown__list::-webkit-scrollbar { + overflow-y: auto; + .ed-vl__window.ed-select-dropdown__list::-webkit-scrollbar { width: 0; height: 0; } diff --git a/frontend/src/views/ds/index.vue b/frontend/src/views/ds/index.vue index 3e9a57c0..1a2379f1 100644 --- a/frontend/src/views/ds/index.vue +++ b/frontend/src/views/ds/index.vue @@ -65,7 +65,7 @@ import { ref, onMounted } from 'vue' import DsForm from './form.vue' import { datasourceApi } from '@/api/datasource' import { datetimeFormat } from '@/utils/utils' -import { ElMessageBox } from 'element-plus' +import { ElMessageBox } from 'element-plus-secondary' import { useRouter } from 'vue-router' const searchValue = ref('') @@ -148,7 +148,7 @@ const getTables = (id: number, name: string) => { // datasourceApi.execSql(id,'select id,name,table_name from core_dataset_table limit 10').then((res) => { // console.log(res) // }) - router.push(`/ds/dsTable/${id}/${name}`) + router.push(`/dsTable/${id}/${name}`) } onMounted(() => { @@ -263,6 +263,7 @@ onMounted(() => { display: flex; .action-btn { display: none; + min-width: 0; } } :hover .action-btn{ diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue index e2973319..a1e06ece 100644 --- a/frontend/src/views/login/index.vue +++ b/frontend/src/views/login/index.vue @@ -140,7 +140,7 @@ const submitForm = () => { } } -:deep(.el-input__wrapper) { +:deep(.ed-input__wrapper) { background-color: #f5f7fa; } \ No newline at end of file diff --git a/frontend/src/views/setting/Professional.vue b/frontend/src/views/setting/Professional.vue index 73b7136d..3b5f263d 100644 --- a/frontend/src/views/setting/Professional.vue +++ b/frontend/src/views/setting/Professional.vue @@ -262,7 +262,7 @@ onMounted(() => { } .sqlbot-table { border-radius: 6px; - :deep(.el-table) { + :deep(.ed-table) { --el-table-header-bg-color: #f5f7fa; --el-table-border-color: #ebeef5; --el-table-header-text-color: #606266; @@ -303,19 +303,19 @@ onMounted(() => { } .sqlbot-form { width: 100%; - .el-form-item { + .ed-form-item { margin-bottom: 16px; text-align: left; label { font-size: 14px; color: #606266; } - /* .el-input { + /* .ed-input { --el-input-border-color: #e5e8ed; --el-input-border-radius: 4px; --el-input-inner-height: 40px !important; } - .el-select { + .ed-select { --el-select-bg-color: #f5f7fa; --el-select-border-color: #e5e8ed; --el-select-border-radius: 4px; @@ -326,7 +326,7 @@ onMounted(() => { .sqlbot-dialog { width: 500px; - :deep(.el-dialog__header) { + :deep(.ed-dialog__header) { text-align: left !important; font-size: 16px; background-color: #f5f7fa; diff --git a/frontend/src/views/setting/index.vue b/frontend/src/views/setting/index.vue index 404d35c6..432c9dfd 100644 --- a/frontend/src/views/setting/index.vue +++ b/frontend/src/views/setting/index.vue @@ -43,9 +43,9 @@ const handleClick = (tab: any, event: MouseEvent) => { box-shadow: var(--shadow); overflow: hidden; padding: 24px; - :deep(.el-tabs) { + :deep(.ed-tabs) { --el-tabs-header-height: 55px; - .el-tabs__header { + .ed-tabs__header { margin: 0 0 24px !important; } } @@ -63,7 +63,7 @@ const handleClick = (tab: any, event: MouseEvent) => { height: 28px; } } - :deep(.el-tabs__item) { + :deep(.ed-tabs__item) { padding: 0 16px !important; &:hover { // color: var(--primary-color); diff --git a/frontend/src/views/system/model/index.vue b/frontend/src/views/system/model/index.vue index 15979168..41da839d 100644 --- a/frontend/src/views/system/model/index.vue +++ b/frontend/src/views/system/model/index.vue @@ -433,7 +433,7 @@ const batchEnableHandler = () => { } .sqlbot-table { border-radius: 6px; - :deep(.el-table) { + :deep(.ed-table) { --el-table-header-bg-color: #f5f7fa; --el-table-border-color: #ebeef5; --el-table-header-text-color: #606266; @@ -487,7 +487,7 @@ const batchEnableHandler = () => { } .sqlbot-form { width: 100%; - .el-form-item { + .ed-form-item { margin-bottom: 16px; text-align: left; label { @@ -499,7 +499,7 @@ const batchEnableHandler = () => { .sqlbot-dialog { width: 500px; - :deep(.el-dialog__header) { + :deep(.ed-dialog__header) { text-align: left !important; font-size: 16px; background-color: #f5f7fa; diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue index 1e625710..3a6ca017 100644 --- a/frontend/src/views/system/user/index.vue +++ b/frontend/src/views/system/user/index.vue @@ -315,7 +315,7 @@ onMounted(() => { } .sqlbot-table { border-radius: 6px; - :deep(.el-table) { + :deep(.ed-table) { --el-table-header-bg-color: #f5f7fa; --el-table-border-color: #ebeef5; --el-table-header-text-color: #606266; @@ -369,7 +369,7 @@ onMounted(() => { } .sqlbot-form { width: 100%; - .el-form-item { + .ed-form-item { margin-bottom: 16px; text-align: left; label { @@ -381,7 +381,7 @@ onMounted(() => { .sqlbot-dialog { width: 500px; - :deep(.el-dialog__header) { + :deep(.ed-dialog__header) { text-align: left !important; font-size: 16px; background-color: #f5f7fa; diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 2723d9ad..06526beb 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -1,8 +1,8 @@ import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' -import Components from 'unplugin-vue-components/vite' -import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' +import Components from 'unplugin-vue-components-secondary/vite' +import { ElementPlusResolver } from 'unplugin-vue-components-secondary/resolvers' import path from 'path' import svgLoader from 'vite-svg-loader' export default defineConfig(({ mode }) => { @@ -38,7 +38,7 @@ export default defineConfig(({ mode }) => { rollupOptions: { output: { manualChunks: { - 'element-plus': ['element-plus'], + 'element-plus-secondary': ['element-plus-secondary'], }, }, }, @@ -47,5 +47,15 @@ export default defineConfig(({ mode }) => { jsxFactory: 'h', jsxFragment: 'Fragment', }, + server: { + proxy: { + '/api': { + target: 'http://192.168.11.65:8000', + changeOrigin: true, + rewrite: path => path.replace(/^\/api/, '/api') + } + }, + port: 8080 + } } })