From c2ddf632c8e642813c89e501d402f06c57369a22 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期一, 03 三月 2025 16:22:18 +0800
Subject: [PATCH] 国际化配置
---
src/main.js | 26 ++-
package.json | 1
src/views/model/index.vue | 7
src/views/model/children/landerModel.vue | 49 ++++++
src/views/model/children/roverModel.vue | 228 +++++++++++++++++++++++++++++++
src/App.vue | 43 +----
src/styles/global.less | 8
7 files changed, 304 insertions(+), 58 deletions(-)
diff --git a/package.json b/package.json
index 7b6811f..3696301 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
"private": true,
"version": "0.0.0",
"type": "module",
- "main": "index.js",
"license": "MIT",
"scripts": {
"dev": "vite",
diff --git a/src/App.vue b/src/App.vue
index 3c352f4..a03c67c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,52 +1,31 @@
<script setup lang="ts">
-import { ref } from 'vue';
-import Header from './layout/Header.vue';
-import TreeMenu from './components/TreeMenu.vue';
+import { ref } from "vue";
+import Header from "./layout/Header.vue";
+import TreeMenu from "./components/TreeMenu.vue";
+import { ElConfigProvider } from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
-const menuItem = ref('/')
+const menuItem = ref("/");
const handMenu = (key: string) => {
menuItem.value = key;
};
-
</script>
<template>
- <div class="common-layout">
- <el-container>
+ <el-config-provider :locale="zhCn">
+ <el-container class="common-layout">
<el-header height="60px">
- <Header @selectMenu="handMenu"/>
+ <Header @selectMenu="handMenu" />
</el-header>
<el-container>
<el-aside width="240px">
- <TreeMenu :menuItem="menuItem"/>
+ <TreeMenu :menuItem="menuItem" />
</el-aside>
<el-main>
<RouterView />
</el-main>
</el-container>
</el-container>
- </div>
+ </el-config-provider>
</template>
-
-<style lang="less">
-.common-layout {
- height: 100vh;
- .el-container {
- height: 100%;
- }
- .el-header {
- background-color: #fff;
- color: #333;
- line-height: 60px;
- border-bottom: 1px solid #eee;
- }
- .el-aside {
- background-color: #fff;
- border-right: 1px solid #eee;
- }
- .el-main {
- background-color: #f5f7fa;
- }
-}
-</style>
diff --git a/src/main.js b/src/main.js
index 2f978f6..cb6d167 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,20 +1,22 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
// 瀹屾暣寮曞叆 Element Plus
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import router from './router'
-import './styles/global.less'
+import ElementPlus from "element-plus";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import router from "./router";
+import "./styles/global.less";
-const app = createApp(App)
+
+
+const app = createApp(App);
// 娉ㄥ唽鎵�鏈夊浘鏍�
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
- app.component(key, component)
+ app.component(key, component);
}
// 浣跨敤 Element Plus
-app.use(ElementPlus)
-app.use(router)
-app.mount('#app')
+app.use(ElementPlus);
+
+app.use(router);
+app.mount("#app");
diff --git a/src/styles/global.less b/src/styles/global.less
index 936bdb4..70a99a1 100644
--- a/src/styles/global.less
+++ b/src/styles/global.less
@@ -97,14 +97,14 @@
/* 寮曞叆 Element Plus 鐨勫熀纭�鏍峰紡 */
+
.common-layout {
width: 100%;
- height: 100%;
+ height: 100%
}
-.el-container {
- width: 100%;
- height: 100%;
+.common-layout .el-container {
+ height: calc(100% - 60px);
}
.el-header {
diff --git a/src/views/model/children/landerModel.vue b/src/views/model/children/landerModel.vue
index f85a342..1ddc270 100644
--- a/src/views/model/children/landerModel.vue
+++ b/src/views/model/children/landerModel.vue
@@ -20,6 +20,7 @@
border
style="width: 100%"
@selection-change="handleSelectionChange"
+ class="landerTable"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="index" label="搴忓彿" width="70" />
@@ -28,17 +29,37 @@
<el-table-column prop="address" label="Address" />
</el-table>
</div>
+ <div class="lander-pagination-block">
+ <el-pagination
+ v-model:current-page="currentPage"
+ :page-size="pageSize"
+ :size="size"
+ :background="background"
+ layout="total, prev, pager, next"
+ :total="100"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
-import type { TableInstance } from "element-plus";
+import type { ComponentSize, TableInstance } from "element-plus";
+// 鎼滅储
const input4 = ref("");
+
+// 琛ㄦ牸
const multipleTableRef = ref<TableInstance>();
const multipleSelection = ref<any[]>([]);
+
+// 鍒嗛〉
+const currentPage = ref(4);
+const pageSize = ref(20);
+const size = ref<ComponentSize>("default");
+const background = ref(true);
const tableData = [
{
@@ -83,10 +104,15 @@
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
+
+
];
+const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+};
+
const handleSelectionChange = (val: []) => {
- console.log(val);
multipleSelection.value = val;
};
</script>
@@ -94,13 +120,30 @@
<style lang="less" scoped>
.landerBox {
width: 100%;
+ height: 100%;
+
.landerTopBox {
display: flex;
justify-content: space-between;
- margin-bottom: 10px;
+ align-items: center;
+ height: 50px;
+ padding: 0 10px;
+ box-sizing: border-box;
}
.landerContentBox {
width: 100%;
+ max-height: calc(100% - 120px);
+ .landerTable {
+ height: 750px;
+ }
+ }
+ .lander-pagination-block {
+ height: 60px;
+ display: flex;
+ justify-content: flex-end;
+ padding: 0 20px;
+ background-color: #fff;
+
}
}
</style>
diff --git a/src/views/model/children/roverModel.vue b/src/views/model/children/roverModel.vue
index 0317fc9..c0313d6 100644
--- a/src/views/model/children/roverModel.vue
+++ b/src/views/model/children/roverModel.vue
@@ -1,14 +1,232 @@
<template>
- <div class="kinematic">
- <h2>宸¤鍣ㄦā鍨嬪簱</h2>
+ <div class="roverBox">
+ <div class="roverTopBox">
+ <el-button :icon="Plus">鏂板缓</el-button>
+ <el-input
+ v-model="input4"
+ style="width: 300px"
+ placeholder="璇疯緭鍏ュ叧閿瓧鎼滅储"
+ >
+ <template #suffix>
+ <el-icon class="el-input__icon"><search /></el-icon>
+ </template>
+ </el-input>
+ </div>
+ <div class="roverContentBox">
+ <el-table
+ ref="multipleTableRef"
+ :data="tableData"
+ row-key="id"
+ border
+ style="width: 100%"
+ @selection-change="handleSelectionChange"
+ class="roverTable"
+ >
+ <el-table-column type="selection" width="55" />
+ <el-table-column prop="index" label="搴忓彿" width="70" />
+ <el-table-column prop="date" label="Date" width="180" />
+ <el-table-column prop="name" label="Name" width="180" />
+ <el-table-column prop="address" label="Address" />
+ </el-table>
+ </div>
+ <div class="rover-pagination-block">
+ <el-pagination
+ v-model:current-page="currentPage"
+ :page-size="pageSize"
+ :size="size"
+ :background="background"
+ layout="total, prev, pager, next"
+ :total="100"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</div>
</template>
<script setup lang="ts">
+import { ref } from "vue";
+import { Plus } from "@element-plus/icons-vue";
+import type { ComponentSize, TableInstance } from "element-plus";
+
+// 鎼滅储
+const input4 = ref("");
+
+// 琛ㄦ牸
+const multipleTableRef = ref<TableInstance>();
+const multipleSelection = ref<any[]>([]);
+
+// 鍒嗛〉
+const currentPage = ref(4);
+const pageSize = ref(100);
+const size = ref<ComponentSize>("default");
+const background = ref(true);
+
+const tableData = [
+ {
+ id: 1,
+ date: "2016-05-03",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 2,
+ date: "2016-05-02",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 3,
+ date: "2016-05-04",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 4,
+ date: "2016-05-01",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 5,
+ date: "2016-05-08",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 6,
+ date: "2016-05-06",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+ {
+ id: 7,
+ date: "2016-05-07",
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles",
+ },
+];
+
+const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+};
+
+const handleSelectionChange = (val: []) => {
+ multipleSelection.value = val;
+};
</script>
<style lang="less" scoped>
-.kinematic {
- padding: 20px;
+.roverBox {
+ width: 100%;
+ height: 100%;
+ .roverTopBox {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 50px;
+ padding: 0 10px;
+ box-sizing: border-box;
+ }
+ .roverContentBox {
+ max-height: calc(100% - 120px);
+
+ .roverTable {
+ height: 750px;
+ }
+ }
+ .rover-pagination-block {
+ height: 60px;
+ display: flex;
+ justify-content: flex-end;
+ background-color: #fff;
+ padding: 0 10px;
+ box-sizing: border-box;
+ }
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/model/index.vue b/src/views/model/index.vue
index 076d6ce..7ee031c 100644
--- a/src/views/model/index.vue
+++ b/src/views/model/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="kinematic">
+ <div class="modelContainer">
<RouterView />
</div>
</template>
@@ -8,4 +8,9 @@
</script>
<style lang="less" scoped>
+.modelContainer {
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1