Skip to content

B
basic-vue-admin
提交 1418dc6a 作者: Vben
操作

feat(icon): added svg icon picker

上级 970d4049
正在显示 包含 59 行增加 和 38 行删除
.vscode/settings.json
...@@ -105,17 +105,12 @@ ...@@ -105,17 +105,12 @@
}, },
"stylelint.enable": true, "stylelint.enable": true,
"stylelint.packageManager": "yarn", "stylelint.packageManager": "yarn",
"css.validate": true,
"less.validate": true,
"scss.validate": true,
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
// =========================================== // ===========================================
// ================ Eslint =================== // ================ Eslint ===================
// =========================================== // ===========================================
// "eslint.enable": true,
"eslint.alwaysShowStatus": true, "eslint.alwaysShowStatus": true,
"eslint.options": { "eslint.options": {
// 配置
"plugins": ["html", "vue", "javascript", "jsx", "typescript"], "plugins": ["html", "vue", "javascript", "jsx", "typescript"],
"extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"] "extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"]
}, },
...@@ -127,7 +122,6 @@ ...@@ -127,7 +122,6 @@
"html", "html",
"vue" "vue"
], ],
// "eslint.autoFixOnSave": true,
// =========================================== // ===========================================
// ================ Vetur ==================== // ================ Vetur ====================
// =========================================== // ===========================================
...@@ -139,7 +133,6 @@ ...@@ -139,7 +133,6 @@
"vetur.format.defaultFormatter.ts": "prettier-tslint", "vetur.format.defaultFormatter.ts": "prettier-tslint",
"vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.js": "prettier",
"vetur.languageFeatures.codeActions": false, "vetur.languageFeatures.codeActions": false,
// "vetur.validation.script": false,
"vetur.format.defaultFormatterOptions": { "vetur.format.defaultFormatterOptions": {
"js-beautify-html": { "js-beautify-html": {
"wrap_attributes": "force-expand-multiline" "wrap_attributes": "force-expand-multiline"
...@@ -201,6 +194,6 @@ ...@@ -201,6 +194,6 @@
"i18n-ally.namespace": true, "i18n-ally.namespace": true,
"i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}", "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
"i18n-ally.enabledParsers": ["ts"], "i18n-ally.enabledParsers": ["ts"],
"i18n-ally.sourceLanguage": "zh", "i18n-ally.sourceLanguage": "en",
"i18n-ally.enabledFrameworks": ["vue", "react"] "i18n-ally.enabledFrameworks": ["vue", "react"]
} }
CHANGELOG.zh_CN.md
## Wip ## Wip
### ✨ Features
- 图标选择器新增 svg 模式
### ✨ Refactor ### ✨ Refactor
- 重构项目以解决循环依赖项导致的热更新问题 - 重构项目以解决循环依赖项导致的热更新问题
......
package.json
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^12.0.1", "@commitlint/cli": "^12.0.1",
"@commitlint/config-conventional": "^12.0.1", "@commitlint/config-conventional": "^12.0.1",
"@iconify/json": "^1.1.313", "@iconify/json": "^1.1.314",
"@ls-lint/ls-lint": "^1.9.2", "@ls-lint/ls-lint": "^1.9.2",
"@purge-icons/generated": "^0.7.0", "@purge-icons/generated": "^0.7.0",
"@types/crypto-js": "^4.0.1", "@types/crypto-js": "^4.0.1",
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
"vite-plugin-purge-icons": "^0.7.0", "vite-plugin-purge-icons": "^0.7.0",
"vite-plugin-pwa": "^0.5.6", "vite-plugin-pwa": "^0.5.6",
"vite-plugin-style-import": "^0.8.1", "vite-plugin-style-import": "^0.8.1",
"vite-plugin-svg-icons": "^0.3.3", "vite-plugin-svg-icons": "^0.3.4",
"vite-plugin-theme": "^0.4.8", "vite-plugin-theme": "^0.4.8",
"vite-plugin-windicss": "0.7.1", "vite-plugin-windicss": "0.7.1",
"vue-eslint-parser": "^7.6.0", "vue-eslint-parser": "^7.6.0",
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
"//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it", "//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
"bin-wrapper": "npm:bin-wrapper-china", "bin-wrapper": "npm:bin-wrapper-china",
"esbuild": "0.8.57", "esbuild": "0.8.57",
"rollup": "2.40.0" "rollup": "2.41.0"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
......
src/components/Application/src/search/AppSearch.vue
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
components: { AppSearchModal, Tooltip }, components: { AppSearchModal, Tooltip },
setup() { setup() {
const showModal = ref(false); const showModal = ref(false);
const { getShowSearch } = useHeaderSetting(); const { getShowSearch } = useHeaderSetting();
const { t } = useI18n(); const { t } = useI18n();
......
src/components/Application/src/search/AppSearchFooter.vue
...@@ -14,14 +14,13 @@ ...@@ -14,14 +14,13 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import Icon from '/@/components/Icon';
import AppSearchKeyItem from './AppSearchKeyItem.vue'; import AppSearchKeyItem from './AppSearchKeyItem.vue';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
export default defineComponent({ export default defineComponent({
name: 'AppSearchFooter', name: 'AppSearchFooter',
components: { Icon, AppSearchKeyItem }, components: { AppSearchKeyItem },
setup() { setup() {
const { prefixCls } = useDesign('app-search-footer'); const { prefixCls } = useDesign('app-search-footer');
const { t } = useI18n(); const { t } = useI18n();
......
src/components/Form/src/BasicForm.vue
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
nextTick, nextTick,
} from 'vue'; } from 'vue';
import { Form, Row } from 'ant-design-vue'; import { Form, Row } from 'ant-design-vue';
import FormItem from './components/FormItem'; import FormItem from './components/FormItem.vue';
import FormAction from './components/FormAction.vue'; import FormAction from './components/FormAction.vue';
import { dateItemType } from './helper'; import { dateItemType } from './helper';
......
src/components/Icon/src/IconPicker.vue
...@@ -30,16 +30,17 @@ ...@@ -30,16 +30,17 @@
<li <li
v-for="icon in getPaginationList" v-for="icon in getPaginationList"
:key="icon" :key="icon"
:class="currentSelect === icon ? 'bg-primary text-white' : ''" :class="currentSelect === icon ? 'border border-primary' : ''"
class="p-2 w-1/8 cursor-pointer mr-1 mt-1 flex justify-center items-center border border-solid hover:bg-primary hover:text-white" class="p-2 w-1/8 cursor-pointer mr-1 mt-1 flex justify-center items-center border border-solid hover:border-primary"
@click="handleClick(icon)" @click="handleClick(icon)"
> >
<!-- <Icon :icon="icon" :prefix="prefix" /> --> <!-- <Icon :icon="icon" :prefix="prefix" /> -->
<Icon :icon="icon" /> <SvgIcon v-if="isSvgMode" :name="icon" />
<Icon :icon="icon" v-else />
</li> </li>
</ul> </ul>
</ScrollContainer> </ScrollContainer>
<div class="flex py-2 items-center justify-center"> <div class="flex py-2 items-center justify-center" v-if="getTotal >= pageSize">
<Pagination <Pagination
showLessItems showLessItems
size="small" size="small"
...@@ -53,7 +54,11 @@ ...@@ -53,7 +54,11 @@
><div class="p-5"> <Empty /></div> ><div class="p-5"> <Empty /></div>
</template> </template>
</template> </template>
<Icon :icon="currentSelect || 'ion:apps-outline'" class="cursor-pointer px-2 py-1" />
<span class="cursor-pointer px-2 py-1 flex items-center" v-if="isSvgMode && currentSelect">
<SvgIcon :name="currentSelect" />
</span>
<Icon :icon="currentSelect || 'ion:apps-outline'" class="cursor-pointer px-2 py-1" v-else />
</Popover> </Popover>
</template> </template>
</a-input> </a-input>
...@@ -66,6 +71,7 @@ ...@@ -66,6 +71,7 @@
import { Input, Popover, Pagination, Empty } from 'ant-design-vue'; import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
import Icon from './index.vue'; import Icon from './index.vue';
import SvgIcon from './SvgIcon.vue';
import iconsData from '../data/icons.data'; import iconsData from '../data/icons.data';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '/@/utils/propTypes';
...@@ -74,7 +80,7 @@ ...@@ -74,7 +80,7 @@
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
// import '@iconify/iconify'; import svgIcons from 'vite-plugin-svg-icons/client';
function getIcons() { function getIcons() {
const data = iconsData as any; const data = iconsData as any;
...@@ -88,25 +94,35 @@ ...@@ -88,25 +94,35 @@
return result; return result;
} }
const icons = getIcons(); function getSvgIcons() {
return svgIcons.map((icon) => icon.replace('icon-', ''));
}
export default defineComponent({ export default defineComponent({
name: 'IconPicker', name: 'IconPicker',
components: { [Input.name]: Input, Icon, Popover, ScrollContainer, Pagination, Empty }, components: { [Input.name]: Input, Icon, Popover, ScrollContainer, Pagination, Empty, SvgIcon },
inheritAttrs: false, inheritAttrs: false,
props: { props: {
value: propTypes.string, value: propTypes.string,
width: propTypes.string.def('100%'), width: propTypes.string.def('100%'),
pageSize: propTypes.number.def(140), pageSize: propTypes.number.def(140),
copy: propTypes.bool.def(false), copy: propTypes.bool.def(false),
mode: propTypes
.oneOf<('svg' | 'iconify')[]>(['svg', 'iconify'])
.def('iconify'),
}, },
emits: ['change'], emits: ['change'],
setup(props, { emit }) { setup(props, { emit }) {
const isSvgMode = props.mode === 'svg';
const icons = isSvgMode ? getSvgIcons() : getIcons();
const currentSelect = ref(''); const currentSelect = ref('');
const visible = ref(false); const visible = ref(false);
const currentList = ref(icons); const currentList = ref(icons);
const { prefixCls } = useDesign('icon-picker');
const { t } = useI18n(); const { t } = useI18n();
const { prefixCls } = useDesign('icon-picker');
const [debounceHandleSearchChange] = useDebounce(handleSearchChange, 100); const [debounceHandleSearchChange] = useDebounce(handleSearchChange, 100);
const { clipboardRef, isSuccessRef } = useCopyToClipboard(props.value); const { clipboardRef, isSuccessRef } = useCopyToClipboard(props.value);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
...@@ -153,6 +169,7 @@ ...@@ -153,6 +169,7 @@
t, t,
prefixCls, prefixCls,
visible, visible,
isSvgMode,
getTotal, getTotal,
getPaginationList, getPaginationList,
handlePageChange, handlePageChange,
......
src/components/Tree/src/TreeHeader.vue
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import { defineComponent, ref, computed } from 'vue'; import { defineComponent, computed } from 'vue';
import { Dropdown, Menu, Input } from 'ant-design-vue'; import { Dropdown, Menu, Input } from 'ant-design-vue';
import { Icon } from '/@/components/Icon'; import { Icon } from '/@/components/Icon';
......
src/design/index.less
...@@ -37,6 +37,7 @@ a:focus, ...@@ -37,6 +37,7 @@ a:focus,
a:active, a:active,
button, button,
div, div,
svg,
span { span {
outline: none !important; outline: none !important;
} }
src/views/demo/feat/icon/index.vue
...@@ -21,18 +21,24 @@ ...@@ -21,18 +21,24 @@
</div> </div>
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="svg Sprite" class="my-5"> <CollapseContainer title="svg 雪碧图" class="my-5">
<div class="flex justify-around flex-wrap"> <div class="flex justify-around flex-wrap">
<SvgIcon name="test" size="32" /> <SvgIcon name="test" size="32" />
</div> </div>
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="图标选择器" class="my-5"> <CollapseContainer title="图标选择器(Iconify)" class="my-5">
<div class="flex justify-around flex-wrap"> <div class="flex justify-around flex-wrap">
<IconPicker /> <IconPicker />
</div> </div>
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="图标选择器(Svg)" class="my-5">
<div class="flex justify-around flex-wrap">
<IconPicker mode="svg" />
</div>
</CollapseContainer>
<Alert <Alert
show-icon show-icon
message="推荐使用Iconify组件" message="推荐使用Iconify组件"
......
yarn.lock
...@@ -1117,10 +1117,10 @@ ...@@ -1117,10 +1117,10 @@
dependencies: dependencies:
cross-fetch "^3.0.6" cross-fetch "^3.0.6"
"@iconify/json@^1.1.313": "@iconify/json@^1.1.314":
version "1.1.313" version "1.1.314"
resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.313.tgz#c225be3c5ce3280a2c34e753a65dc257b85b6652" resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.314.tgz#43b417e5131b55e879f94b6fc40b09928eea42ad"
integrity sha512-gv00rSX4apKE0i/fUjXp5+sBb8LHzzdJqrXkBNVby7Nl7yzRqeQ/EyY+7ixtSpEu3f1P/co/vrgdbZN6wlw6DA== integrity sha512-KDc2dtNnbUryuUWs4ov1e8xCcEjrU/9r3PLOsElzsRpMjaGe/RfpAvU1NkDlv7Mmriaah+Dj6SVoLeRSUB5q3g==
"@intlify/core-base@9.0.0": "@intlify/core-base@9.0.0":
version "9.0.0" version "9.0.0"
...@@ -7680,10 +7680,10 @@ rollup-plugin-visualizer@^4.2.0: ...@@ -7680,10 +7680,10 @@ rollup-plugin-visualizer@^4.2.0:
source-map "^0.7.3" source-map "^0.7.3"
yargs "^16.0.3" yargs "^16.0.3"
rollup@2.40.0, rollup@^0.63.4, rollup@^2.25.0, rollup@^2.38.5, rollup@^2.40.0: rollup@2.41.0, rollup@^0.63.4, rollup@^2.25.0, rollup@^2.38.5, rollup@^2.40.0:
version "2.40.0" version "2.41.0"
resolved "https://registry.npmjs.org/rollup/-/rollup-2.40.0.tgz#efc218eaede7ab590954df50f96195188999c304" resolved "https://registry.npmjs.org/rollup/-/rollup-2.41.0.tgz#b2a398bbabbf227738dedaef099e494aed468982"
integrity sha512-WiOGAPbXoHu+TOz6hyYUxIksOwsY/21TRWoO593jgYt8mvYafYqQl+axaA8y1z2HFazNUUrsMSjahV2A6/2R9A== integrity sha512-Gk76XHTggulWPH95q8V62bw6uqDH6UGvbD6LOa3QUyhuMF3eOuaeDHR7SLm1T9faitkpNrqzUAVYx47klcMnlA==
optionalDependencies: optionalDependencies:
fsevents "~2.3.1" fsevents "~2.3.1"
...@@ -9160,10 +9160,10 @@ vite-plugin-style-import@^0.8.1: ...@@ -9160,10 +9160,10 @@ vite-plugin-style-import@^0.8.1:
es-module-lexer "^0.4.1" es-module-lexer "^0.4.1"
magic-string "^0.25.7" magic-string "^0.25.7"
vite-plugin-svg-icons@^0.3.3: vite-plugin-svg-icons@^0.3.4:
version "0.3.3" version "0.3.4"
resolved "https://registry.npmjs.org/vite-plugin-svg-icons/-/vite-plugin-svg-icons-0.3.3.tgz#b699e1af244500d893cc32b48a772492c1fae72b" resolved "https://registry.npmjs.org/vite-plugin-svg-icons/-/vite-plugin-svg-icons-0.3.4.tgz#505aacff35f19d4e1c81f05a85bded0d6f1f6323"
integrity sha512-ZI3FLspeM3PV0OE503m7/11jW5aSSCwxXUEcJZL3RwSYmpkLE0cSsM7UFZf0tx3cRoSB/JpeOlRIRH6G2BhWiQ== integrity sha512-N4KYqmyF/gnsYIBxvMTyotjWSdur/6EyycE6eJvM2m7oHHxe8Y+SZZlD+XTz8Nl+zfurXYDkrbbHAdtWlpJovw==
dependencies: dependencies:
debug "^4.3.2" debug "^4.3.2"
etag "^1.8.1" etag "^1.8.1"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论