feat: Icon改版

package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^3.1.0",
+    "@iconify/vue": "^4.1.1",
     "@vueuse/core": "^10.2.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",

src/components/Icon/src/Icon.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, unref, ref, watch, nextTick } from 'vue'
+import { computed, unref } from 'vue'
 import { ElIcon } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'
-import Iconify from '@purge-icons/generated'
 import { useDesign } from '@/hooks/web/useDesign'
+import { Icon } from '@iconify/vue'
 
 const { getPrefixCls } = useDesign()
 
@@ -19,7 +19,7 @@ const props = defineProps({
   hoverColor: propTypes.string
 })
 
-const elRef = ref<ElRef>(null)
+const emit = defineEmits(['click'])
 
 const isLocal = computed(() => props.icon.startsWith('svg-icon:'))
 
@@ -35,53 +35,28 @@ const getIconifyStyle = computed(() => {
   }
 })
 
-const updateIcon = async (icon: string) => {
-  if (unref(isLocal)) return
-
-  const el = unref(elRef)
-  if (!el) return
-
-  await nextTick()
-
-  if (!icon) return
-
-  const svg = Iconify.renderSVG(icon, {})
-  if (svg) {
-    el.textContent = ''
-    el.appendChild(svg)
-  } else {
-    const span = document.createElement('span')
-    span.className = 'iconify'
-    span.dataset.icon = icon
-    el.textContent = ''
-    el.appendChild(span)
-  }
+const iconClick = () => {
+  emit('click')
 }
-
-watch(
-  () => props.icon,
-  (icon: string) => {
-    updateIcon(icon)
-  }
-)
 </script>
 
 <template>
-  <ElIcon :class="prefixCls" :size="size" :color="color">
+  <ElIcon :class="prefixCls" :size="size" :color="color" @click="iconClick">
     <svg v-if="isLocal" aria-hidden="true">
       <use :xlink:href="symbolId" />
     </svg>
 
-    <span v-else ref="elRef" class="iconify" :data-icon="symbolId" :style="getIconifyStyle"></span>
+    <Icon v-else :icon="icon" :style="getIconifyStyle" />
   </ElIcon>
 </template>
 
 <style lang="less" scoped>
 @prefix-cls: ~'@{namespace}-icon';
 
-.@{prefix-cls} {
+.@{prefix-cls},
+.iconify {
   &:hover {
-    svg {
+    :deep(svg) {
       color: v-bind(hoverColor) !important;
     }
   }

src/components/Table/src/Table.vue

@@ -1,5 +1,12 @@
 <script lang="tsx">
-import { ElTable, ElTableColumn, ElPagination, ComponentSize, ElTooltipProps } from 'element-plus'
+import {
+  ElTable,
+  ElTableColumn,
+  ElPagination,
+  ComponentSize,
+  ElTooltipProps,
+  ElTooltip
+} from 'element-plus'
 import { defineComponent, PropType, ref, computed, unref, watch, onMounted } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { setIndex } from './helper'
@@ -8,12 +15,17 @@ import { set } from 'lodash-es'
 import { CSSProperties } from 'vue'
 import { getSlot } from '@/utils/tsxHelper'
 import { Icon } from '@/components/Icon'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const { t } = useI18n()
 
 export default defineComponent({
   name: 'Table',
   props: {
     pageSize: propTypes.number.def(10),
     currentPage: propTypes.number.def(1),
+    // 是否展示表格的工具栏
+    showAction: propTypes.bool.def(false),
     // 是否所有的超出隐藏，优先级低于schema中的showOverflowTooltip,
     showOverflowTooltip: propTypes.bool.def(true),
     // 表头
@@ -171,7 +183,7 @@ export default defineComponent({
     scrollbarAlwaysOn: propTypes.bool.def(false),
     flexible: propTypes.bool.def(false)
   },
-  emits: ['update:pageSize', 'update:currentPage', 'register'],
+  emits: ['update:pageSize', 'update:currentPage', 'register', 'refresh'],
   setup(props, { attrs, emit, slots, expose }) {
     const elTableRef = ref<ComponentRef<typeof ElTable>>()
 
@@ -231,6 +243,10 @@ export default defineComponent({
       }
     }
 
+    const refresh = () => {
+      emit('refresh')
+    }
+
     expose({
       setProps,
       setColumn,
@@ -411,9 +427,18 @@ export default defineComponent({
       }
       return (
         <div v-loading={unref(getProps).loading}>
-          <div>
-            <Icon icon="ant-design:sync-outlined" class="cursor-pointer" />
+          {unref(getProps).showAction ? (
+            <div class="text-right">
+              <ElTooltip content={t('common.refresh')} placement="top">
+                <Icon
+                  icon="ant-design:sync-outlined"
+                  class="cursor-pointer mr-8px"
+                  hover-color="var(--el-color-primary)"
+                  onClick={refresh}
+                />
+              </ElTooltip>
             </div>
+          ) : null}
           <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>
             {{
               default: () => renderTableColumn(),

src/components/Table/src/types/index.ts

@@ -74,6 +74,7 @@ export interface TableSetProps {
 export interface TableProps extends Omit<Partial<ElTableProps<any[]>>, 'data'> {
   pageSize?: number
   currentPage?: number
+  showAction?: boolean
   // 是否所有的超出隐藏，优先级低于schema中的showOverflowTooltip,
   showOverflowTooltip?: boolean
   // 表头

src/components/TagsView/src/TagsView.vue

@@ -371,7 +371,6 @@ watch(
                   <Icon
                     :class="`${prefixCls}__item--close`"
                     color="#333"
-                    hover-color="var(--el-color-white)"
                     icon="ant-design:close-outlined"
                     :size="12"
                     @click.prevent.stop="closeSelectedTag(item)"

src/hooks/web/useTable.ts

@@ -150,6 +150,10 @@ export const useTable = (config: UseTableConfig) => {
     getElTableExpose: async () => {
       await getTable()
       return unref(elTableRef)
+    },
+
+    refresh: () => {
+      methods.getList()
     }
     // // 删除数据
     // delList: async (ids: string[] | number[], multiple: boolean, message = true) => {

src/locales/en.ts

@@ -40,7 +40,9 @@ export default {
     delOk: 'OK',
     delCancel: 'Cancel',
     delNoData: 'Please select the data to delete',
-    delSuccess: 'Deleted successfully'
+    delSuccess: 'Deleted successfully',
+    refresh: 'Refresh',
+    fullscreen: 'Fullscreen'
   },
   lock: {
     lockScreen: 'Lock screen',

src/locales/zh-CN.ts

@@ -40,7 +40,9 @@ export default {
     delOk: '确定',
     delCancel: '取消',
     delNoData: '请选择需要删除的数据',
-    delSuccess: '删除成功'
+    delSuccess: '删除成功',
+    refresh: '刷新',
+    fullscreen: '全屏'
   },
   lock: {
     lockScreen: '锁定屏幕',

src/views/Components/Table/UseTableDemo.vue

@@ -21,7 +21,7 @@ const { tableRegister, tableMethods, tableState } = useTable({
   }
 })
 const { loading, dataList, total, currentPage, pageSize } = tableState
-const { setProps, setColumn, getElTableExpose, addColumn, delColumn } = tableMethods
+const { setProps, setColumn, getElTableExpose, addColumn, delColumn, refresh } = tableMethods
 
 const { t } = useI18n()
 
@@ -249,6 +249,7 @@ const getSelections = async () => {
     <Table
       v-model:pageSize="pageSize"
       v-model:currentPage="currentPage"
+      showAction
       :columns="columns"
       :data="dataList"
       :loading="loading"
@@ -260,6 +261,7 @@ const getSelections = async () => {
           : undefined
       "
       @register="tableRegister"
+      @refresh="refresh"
     />
   </ContentWrap>
 </template>