feat: add pagination locale and table max height

frontend/.env.production

@@ -1 +1 @@
-VITE_API_BASE_URL=https://api.example.com/api
+VITE_API_BASE_URL=http://101.42.1.64:2260/api

frontend/src/main.js

@@ -2,10 +2,11 @@
 import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import 'element-plus/dist/index.css'
 import './styles/base.css'
 
 const app = createApp(App)
 app.use(router)
-app.use(ElementPlus)
+app.use(ElementPlus, { locale: zhCn })
 app.mount('#app')

frontend/src/styles/base.css

@@ -87,6 +87,10 @@ a {
   overflow: hidden;
 }
 
+.table-maxheight {
+  max-height: 560px;
+}
+
 .el-table th.el-table__cell {
   background: var(--bg-soft);
   color: var(--text-900);

frontend/src/views/FactoryManage.vue

@@ -4,7 +4,7 @@
     <div class="toolbar">
       <el-button v-if="isAdmin" type="primary" @click="openCreate">新增工厂</el-button>
     </div>
-    <el-table :data="factories" border>
+    <el-table :data="factories" border class="table-maxheight">
       <el-table-column prop="factory_name" label="工厂全称" />
       <el-table-column prop="factory_short_name" label="工厂简称" />
       <el-table-column prop="dealer_name" label="经销商" />
@@ -23,6 +23,18 @@
         </template>
       </el-table-column>
     </el-table>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :page-sizes="[10, 20, 50]"
+        :current-page="pagination.page"
+        :page-size="pagination.pageSize"
+        :total="pagination.total"
+        @current-change="onPageChange"
+        @size-change="onPageSizeChange"
+      />
+    </div>
 
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="640px">
       <el-form :model="form" label-width="100px">
@@ -73,6 +85,11 @@ import { fetchFactories, fetchFactoryDetail, createFactory, updateFactory, delet
 const router = useRouter()
 const { isAdmin } = useAuth()
 const factories = ref([])
+const pagination = reactive({
+  page: 1,
+  pageSize: 10,
+  total: 0
+})
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
 const isEdit = ref(false)
@@ -94,8 +111,9 @@ const form = reactive({
 })
 
 const loadFactories = async () => {
-  const data = await fetchFactories()
+  const data = await fetchFactories({ page: pagination.page, page_size: pagination.pageSize })
   factories.value = data.results || data
+  pagination.total = data.count || factories.value.length
 }
 
 const resetForm = () => {
@@ -164,8 +182,27 @@ const goDetail = (row) => {
   router.push(`/factories/${row.id}`)
 }
 
+const onPageChange = (page) => {
+  pagination.page = page
+  loadFactories()
+}
+
+const onPageSizeChange = (size) => {
+  pagination.pageSize = size
+  pagination.page = 1
+  loadFactories()
+}
+
 onMounted(() => {
   loadFactories()
 })
 </script>
 
+<style scoped>
+.pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+

frontend/src/views/MaterialManage.vue

@@ -13,7 +13,7 @@
       <el-button type="primary" @click="openCreate">新增材料</el-button>
     </div>
 
-    <el-table :data="materials" border>
+    <el-table :data="materials" border class="table-maxheight">
       <el-table-column prop="name" label="材料名称" />
       <el-table-column prop="major_category_display" label="专业类别" />
       <el-table-column prop="material_category" label="材料分类" />
@@ -33,6 +33,18 @@
         </template>
       </el-table-column>
     </el-table>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :page-sizes="[10, 20, 50]"
+        :current-page="pagination.page"
+        :page-size="pagination.pageSize"
+        :total="pagination.total"
+        @current-change="onPageChange"
+        @size-change="onPageSizeChange"
+      />
+    </div>
 
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="820px">
       <el-form :model="form" label-width="110px">
@@ -163,6 +175,11 @@ import { fetchFactorySimple } from '@/api/factory'
 const router = useRouter()
 const { isAdmin } = useAuth()
 const materials = ref([])
+const pagination = reactive({
+  page: 1,
+  pageSize: 10,
+  total: 0
+})
 const factories = ref([])
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
@@ -216,8 +233,13 @@ const filterSubcategoryOptions = ref([])
 const allSubcategories = ref([])
 
 const loadMaterials = async () => {
-  const data = await fetchMaterials({ ...filters })
+  const data = await fetchMaterials({
+    ...filters,
+    page: pagination.page,
+    page_size: pagination.pageSize
+  })
   materials.value = data.results || data
+  pagination.total = data.count || materials.value.length
 }
 
 const loadChoices = async () => {
@@ -384,6 +406,17 @@ const goDetail = (row) => {
   router.push(`/materials/${row.id}`)
 }
 
+const onPageChange = (page) => {
+  pagination.page = page
+  loadMaterials()
+}
+
+const onPageSizeChange = (size) => {
+  pagination.pageSize = size
+  pagination.page = 1
+  loadMaterials()
+}
+
 onMounted(() => {
   loadChoices()
   loadCategories()
@@ -393,6 +426,14 @@ onMounted(() => {
 })
 </script>
 
+<style scoped>
+.pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
 <style scoped>
 .preview img {
   width: 120px;

frontend/src/views/UserManage.vue

@@ -4,7 +4,7 @@
     <div class="toolbar">
       <el-button type="primary" @click="openCreate">新增用户</el-button>
     </div>
-    <el-table :data="users" border>
+    <el-table :data="users" border class="table-maxheight">
       <el-table-column prop="username" label="用户名" />
       <el-table-column prop="role" label="角色">
         <template #default="scope">
@@ -23,6 +23,18 @@
         </template>
       </el-table-column>
     </el-table>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :page-sizes="[10, 20, 50]"
+        :current-page="pagination.page"
+        :page-size="pagination.pageSize"
+        :total="pagination.total"
+        @current-change="onPageChange"
+        @size-change="onPageSizeChange"
+      />
+    </div>
 
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px">
       <el-form :model="form" label-width="90px">
@@ -68,6 +80,11 @@ import { fetchUsers, createUser, updateUser, deleteUser } from '@/api/auth'
 import { fetchFactorySimple } from '@/api/factory'
 
 const users = ref([])
+const pagination = reactive({
+  page: 1,
+  pageSize: 10,
+  total: 0
+})
 const factories = ref([])
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
@@ -85,8 +102,9 @@ const form = reactive({
 })
 
 const loadUsers = async () => {
-  const data = await fetchUsers()
+  const data = await fetchUsers({ page: pagination.page, page_size: pagination.pageSize })
   users.value = data.results || data
+  pagination.total = data.count || users.value.length
 }
 
 const loadFactories = async () => {
@@ -159,8 +177,27 @@ const onDelete = (row) => {
     .catch(() => {})
 }
 
+const onPageChange = (page) => {
+  pagination.page = page
+  loadUsers()
+}
+
+const onPageSizeChange = (size) => {
+  pagination.pageSize = size
+  pagination.page = 1
+  loadUsers()
+}
+
 onMounted(() => {
   loadUsers()
   loadFactories()
 })
 </script>
+
+<style scoped>
+.pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>