refactor: 系统管理页面重构和ts类型声明优化

Former-commit-id: 40263bbb072596ada41ef33d9170841e7e66cd01

src/views/system/dict/index.vue

@@ -1,56 +1,55 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import DictType from './components/DictType.vue';
+import DictItem from './components/DictItem.vue';
+
+import { reactive, toRefs } from 'vue';
+
+const state = reactive({
+  typeCode: '',
+  typeName: '',
+});
+
+const { typeCode, typeName } = toRefs(state);
+
+const handleDictTypeClick = (row: any) => {
+  if (row) {
+    state.typeName = row.name;
+    state.typeCode = row.code;
+  } else {
+    state.typeName = '';
+    state.typeCode = '';
+  }
+};
+</script>
+
 <template>
   <div class="app-container">
     <el-row :gutter="10">
       <el-col :span="12" :xs="24">
         <el-card class="box-card">
           <template #header>
-            <svg-icon color="#333" icon-class="education" />
-            字典列表
+            <svg-icon icon-class="dict" />
+            字典类型
           </template>
-          <!-- 字典列表子组件 -->
-          <dict @dictClick="handleDictClick" />
+          <dict-type @dictClick="handleDictTypeClick" />
         </el-card>
       </el-col>
 
       <el-col :span="12" :xs="24">
         <el-card class="box-card">
           <template #header>
-            <svg-icon color="#333" icon-class="dict" />
+            <svg-icon icon-class="dict_item" />
             <span style="margin: 0 5px">字典数据项</span>
-            <el-tag type="success" v-if="dictCode" size="small">{{
-              dictName
+            <el-tag type="success" v-if="typeCode" size="small">{{
+              typeName
             }}</el-tag>
             <el-tag type="warning" v-else size="small">未选择字典</el-tag>
           </template>
           <!-- 字典项组件 -->
-          <dict-item :dictName="dictName" :dictCode="dictCode" />
+          <dict-item :typeName="typeName" :typeCode="typeCode" />
         </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
-
-<script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon/index.vue';
-import Dict from './components/Dict.vue';
-import DictItem from './components/DictItem.vue';
-
-import { reactive, toRefs } from 'vue';
-
-const state = reactive({
-  dictCode: '',
-  dictName: '' // 字典名称，用于字典项组件回显
-});
-
-const { dictCode, dictName } = toRefs(state);
-
-const handleDictClick = (dictRow: any) => {
-  if (dictRow) {
-    state.dictName = dictRow.name;
-    state.dictCode = dictRow.code;
-  } else {
-    state.dictName = '';
-    state.dictCode = '';
-  }
-};
-</script>