修改图标，调整字段关联界面

index.html

@@ -135,30 +135,27 @@
     .loader {
       width: 50px;
       aspect-ratio: 1;
-      display: grid;
+      border-radius: 50%;
+      border: 8px solid #0000;
+      border-right-color: #ffa50097;
+      position: relative;
+      animation: l24 1s infinite linear;
     }
-    .loader::before,
+    .loader:before,
-    .loader::after {
+    .loader:after {
-      content:"";
+      content: "";
-      grid-area: 1/1;
+      position: absolute;
-      --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
+      inset: -8px;
-      background:
+      border-radius: 50%;
-        var(--c) 50%  0,
+      border: inherit;
-        var(--c) 50%  100%,
+      animation: inherit;
-        var(--c) 100% 50%,
+      animation-duration: 2s;
-        var(--c) 0    50%;
-      background-size: 12px 12px;
-      animation: l12 1s infinite;
     }
-    .loader::before {
+    .loader:after {
-      margin: 4px;
+      animation-duration: 4s;
-      filter: hue-rotate(45deg);
-      background-size: 8px 8px;
-      animation-timing-function: linear
     }
-
+    @keyframes l24 {
-    @keyframes l12 {
+      100% {transform: rotate(1turn)}
-      100%{transform: rotate(.5turn)}
     }
   </style>
 </head>

public/favicon_logosc/site.webmanifest

@@ -0,0 +1 @@
+{"background_color":"#ffffff","display":"standalone","icons":[{"sizes":"192x192","src":"/android-chrome-192x192.png","type":"image/png"},{"sizes":"512x512","src":"/android-chrome-512x512.png","type":"image/png"}],"name":"","short_name":"","theme_color":"#ffffff"}

src/api/system/field.ts

@@ -1,10 +1,11 @@
 import request from '@/utils/request'
 
 const url = '/system/field/'
-export const getModelList = () => {
+export const getModelList = (params: { pageNum: number; pageSize: number }) => {
   return request({
     url: url + 'getModelList',
-    method: 'get'
+    method: 'get',
+    params
   })
 }
 

src/assets/styles/sidebar.scss

@@ -4,7 +4,7 @@
     overflow-y: hidden;
     z-index: 1001;
     transition: width 0.28s ease;
-    background-image: var(--base-menu-background);
+    background-color: var(--base-menu-background);
     height: 100%;
     display: flex;
     flex-direction: column;

src/assets/styles/variables.module.scss

@@ -22,10 +22,15 @@ $panGreen: #30b08f;
   --base-login-width: 280px;
 }
 
+$base-menu-background: #324157;
+$base-menu-light-background: #ffffff;
+$base-menu-color: #bfcbd9;
+$base-menu-light-color: rgba(0, 0, 0, 0.7);
+
 /***侧边栏深色配置***/
 [data-theme='theme-dark'] {
-  // --base-menu-background: #324157;
+  --base-menu-background: #324157;
-  --base-menu-background: linear-gradient(to right, #243949 0%, #517fa4 100%);
+  // --base-menu-background: linear-gradient(to right, #243949 0%, #517fa4 100%);
   --base-logo-title-color: #ffffff;
   // // el-ement ui 设置
   // --el-fill-color-blank: #304156;
@@ -44,3 +49,10 @@ html.cafe {
 html.contrast {
   filter: contrast(2);
 }
+
+:export {
+  menuColor: $base-menu-color;
+  menuLightColor: $base-menu-light-color;
+  menuBackground: $base-menu-background;
+  menuLightBackground: $base-menu-light-background;
+}

src/views/system/rolefields/index.vue

@@ -17,9 +17,15 @@
             <template #header>
               <b>模型</b>
             </template>
-            <el-table ref="modelTable" :data="modelList" height="580" border highlight-current-row @current-change="handleCurrentChange">
+            <el-table ref="modelTable" :data="modelList" border highlight-current-row @current-change="handleCurrentChange">
               <el-table-column prop="fullName" label="模型" />
             </el-table>
+            <pagination
+              v-model:total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              :layout="'sizes, pager, jumper'"
+              @pagination="getList" />
           </el-card>
         </el-col>
         <el-col :span="14">
@@ -60,11 +66,22 @@ const goBack = () => {
 }
 const modelTable = ref<InstanceType<typeof ElTable>>()
 const initBtnLoading = ref(false)
+const total = ref(0)
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10
+})
 const handleInit = async () => {
   initBtnLoading.value = true
-  await initFields()
+  saveBtnLoading.value = true
+  try {
+    await initFields()
+    modal.msgSuccess('初始化完成')
+  } catch (err) {
+    console.error(err)
+  }
   initBtnLoading.value = false
-  modal.msgSuccess('初始化完成')
+  saveBtnLoading.value = false
   getList()
 }
 interface model {
@@ -81,13 +98,18 @@ const modelList = ref<model[]>([])
 const fieldList = ref<field[]>([])
 const getList = async () => {
   cardLoading.value = true
-  const { data } = await getModelList()
+  try {
-  modelList.value = data
+    const { data } = await getModelList(queryParams.value)
+    modelList.value = data.result
+    total.value = data.totalNum
+  } catch (err) {
+    console.error(err)
+  }
   cardLoading.value = false
 }
 
 const currentRow = ref()
-const handleCurrentChange = (val: any) => {
+const handleCurrentChange = async (val: any) => {
   if (val) {
     currentRow.value = val
     handleLoadFieldList()
@@ -106,7 +128,6 @@ const handleLoadFieldList = async () => {
   }
   fieldListLoading.value = false
 }
-
 const fieldListLoading = ref(false)
 const saveBtnLoading = ref(false)
 const handleSave = async () => {
@@ -125,4 +146,14 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.flex {
+  display: flex;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.items-center {
+  align-items: center;
+}
+</style>