@pubinfo/module-rbac 2.0.0-rc.4 → 2.0.0-rc.5

package/src/components/ResourceIcones/Select.vue

@@ -2,20 +2,63 @@
 import * as AntdIcons from '@ant-design/icons-vue';
 import { Empty } from 'ant-design-vue';
 import { getAllIconModules, PubinfoIcon } from 'pubinfo';
+import { computed, ref, watch } from 'vue';
+import ResourceIconesBoxColorPicker from './BoxColorPicker.vue';
 
 defineOptions({ name: 'ResourceIconesSelect' });
 
-// v-model
+// v-model（对外的值）
 const modelValueRef = defineModel<string>();
+// 额外样式参数的多路 v-model：边框(boxType)、角度(angle)、背景(background)、圆角(radius)、图标色(iconColor)
+const modelBoxType = defineModel<'null' | 'square' | 'prism'>('boxType', { default: 'null' });
+const modelAngle = defineModel<number | string>('angle', { default: 65 });
+const modelBackground = defineModel<string | { from: string, to: string }>('background', { default: { from: '#65E54A', to: '#35C724' } });
+const modelRadius = defineModel<number | string>('radius', { default: 6 });
+const modelIconColor = defineModel<string>('iconColor', { default: '' });
+// 对话框内部临时选择值（仅在点击确定时写回到 v-model）
+const tempValueRef = ref<string | undefined>(modelValueRef.value);
+// 对话框内部样式状态
+const boxType = ref<'null' | 'square' | 'prism'>(modelBoxType.value || 'null');
+const boxAngle = ref<number | string>(modelAngle.value ?? 65);
+const boxBackground = ref<string | { from: string, to: string }>(modelBackground.value ?? { from: '#65E54A', to: '#35C724' });
+const boxRadius = ref<number | string>(modelRadius.value ?? 6);
+// 图标颜色：无背景默认不着色（空字符串表示未设置）；有背景默认白色
+const iconColor = ref<string>(modelIconColor.value ?? '');
+const iconColorPickerRef = ref<HTMLInputElement | null>(null);
 
 // 弹窗
 const visibleRef = ref(false);
 function handleOpenModal() {
+  // 打开时同步一次外部值到临时值，避免未确认的变更影响外部
+  tempValueRef.value = modelValueRef.value;
+  // 同步样式参数到对话框内部状态
+  boxType.value = modelBoxType.value || 'null';
+  boxAngle.value = modelAngle.value ?? 65;
+  // 深拷贝背景，避免未确认时影响外部，同时确保确认时能产生新引用
+  const bg = modelBackground.value;
+  boxBackground.value = typeof bg === 'string'
+    ? bg
+    : (bg ? { ...(bg as any) } : { from: '#65E54A', to: '#35C724' });
+  boxRadius.value = modelRadius.value ?? 6;
+  iconColor.value = modelIconColor.value ?? '';
   visibleRef.value = true;
 }
 function handleClose() {
   visibleRef.value = false;
 }
+function handleConfirm() {
+  // 将临时值写回 v-model，再关闭弹窗
+  modelValueRef.value = tempValueRef.value as any;
+  // 回写样式参数
+  modelBoxType.value = boxType.value;
+  modelAngle.value = boxAngle.value;
+  // 使用新对象引用写回，确保仅背景变化也会触发更新
+  const bg2 = boxBackground.value as any;
+  modelBackground.value = typeof bg2 === 'string' ? bg2 : (bg2 ? { ...bg2 } : bg2);
+  modelRadius.value = boxRadius.value;
+  modelIconColor.value = iconColor.value;
+  visibleRef.value = false;
+}
 
 // 基础数据
 interface IconItem { name: string, module?: string }
@@ -134,24 +177,51 @@ function onPageChange(page: number) {
 
 // 选择
 function handleSelect(icon: IconItem) {
-  modelValueRef.value = icon.name;
-  handleClose();
+  tempValueRef.value = icon.name;
 }
 
 const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+function openIconColorPicker() {
+  if (!((tempValueRef.value || '').startsWith('antd:'))) {
+    return;
+  }
+  const el = iconColorPickerRef.value;
+  if (el) {
+    el.style.width = '16px';
+    el.style.height = '16px';
+    el.click();
+  }
+}
+// 当前选中是否为 AntD 图标
+const isAntdIcon = computed(() => (tempValueRef.value || '').startsWith('antd:'));
+
+// 当切换背景时，控制图标颜色的默认值：
+// - 选择背景（从无到有）时，默认为白色
+// - 取消背景（从有到无）时，恢复为未设置（使用图标默认颜色）
+watch(boxType, (val, oldVal) => {
+  if (oldVal === 'null' && val !== 'null' && !iconColor.value) {
+    iconColor.value = '#ffffff';
+  }
+});
+
+// 预览统一尺寸（外层 box 尺寸）与 padding，确保三个选项视觉对齐
+const previewBoxOuter = 24; // 与 Square/Prism 默认保持一致
+const previewBoxPadding = 4; // 与 shapeBoxDefaults 中的 padding 对齐
 </script>
 
 <template>
-  <a-input v-model:value="modelValueRef" @click="handleOpenModal">
-    <template #addonAfter>
-      <a-tooltip>
-        <template #title>
-          <PubinfoIcon :name="modelValueRef || ''" size="40px" class="cursor-default" />
-        </template>
-        <PubinfoIcon :name="modelValueRef || ''" size="20px" class="cursor-default" />
-      </a-tooltip>
-    </template>
-  </a-input>
+  <slot :open="handleOpenModal">
+    <a-input :value="modelValueRef" readonly @click="handleOpenModal">
+      <template #addonAfter>
+        <a-tooltip>
+          <template #title>
+            <PubinfoIcon :name="modelValueRef || ''" size="40px" class="cursor-default" />
+          </template>
+          <PubinfoIcon :name="modelValueRef || ''" size="20px" class="cursor-default" />
+        </a-tooltip>
+      </template>
+    </a-input>
+  </slot>
   <a-form-item-rest>
     <a-modal
       v-model:open="visibleRef"
@@ -210,8 +280,10 @@ const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
                   </div>
                 </template>
                 <div
-                  class="group relative flex flex-col items-center justify-center cursor-pointer rounded-md"
-                  :class="modelValueRef === icon.name ? 'border-[#1677ff] ring-2 ring-[#1677ff80]' : ''"
+                  class="group relative flex flex-col items-center justify-center cursor-pointer rounded-md border"
+                  :class="tempValueRef === icon.name
+                    ? 'border-solid border-[#1677ff]'
+                    : 'border-dashed border-[#e5e7eb] dark:border-[#30363d]'"
                   @click="handleSelect(icon)"
                 >
                   <PubinfoIcon :name="icon.name" size="30px" />
@@ -234,7 +306,147 @@ const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
             <a-empty :image="simpleImage" description="没有匹配的图标" />
           </div>
         </div>
+        <!-- 右侧预留区域 -->
+        <div v-if="tempValueRef" class="relative w-60 flex flex-col border-l border-[#e5e7eb] dark:border-[#30363d] pl-4 min-h-0">
+          <div class="flex flex-col flex-1 w-full rounded-md border border-dashed border-[#d0d7de] dark:border-[#30363d] text-12px text-[#6b7280] dark:text-[#94a3b8] p-3 overflow-hidden">
+            <!-- 选项：固定顶部 -->
+            <div class="shrink-0 flex justify-center items-center pb-4 border-b border-b-dashed border-b-[#d0d7de] dark:border-b-[#30363d]">
+              <a-radio-group v-model:value="boxType" class="flex justify-center items-center">
+                <a-radio-button value="null">
+                  <div class="w-8 h-8 flex justify-center items-center">
+                    <PubinfoIcon :name="tempValueRef" :size="previewBoxOuter - previewBoxPadding * 2" />
+                  </div>
+                </a-radio-button>
+                <a-radio-button value="square">
+                  <div class="w-8 h-8 flex justify-center items-center">
+                    <PubinfoIcon
+                      :name="tempValueRef"
+                      box="square"
+                      :size="previewBoxOuter"
+                      radius="6px"
+                      color="#ffffff"
+                    />
+                  </div>
+                </a-radio-button>
+                <a-radio-button value="prism">
+                  <div class="w-8 h-8 flex justify-center items-center">
+                    <PubinfoIcon
+                      :name="tempValueRef"
+                      box="prism"
+                      :size="previewBoxOuter"
+                      color="#ffffff"
+                      radius="2px"
+                    />
+                  </div>
+                </a-radio-button>
+              </a-radio-group>
+            </div>
+            <!-- 中间配置：保持在中部，可滚动，占据剩余空间 -->
+            <div class="flex-1 w-full mt-3 px-2 overflow-auto space-y-3">
+              <!-- 背景设置：始终显示；当 boxType 为 null 时禁用 -->
+              <div class="flex flex-col justify-start w-full opacity-100">
+                <div class="text-12px mb-2 opacity-70">
+                  背景设置
+                </div>
+                <ResourceIconesBoxColorPicker
+                  v-model:angle="boxAngle"
+                  v-model:background="boxBackground"
+                  v-model:radius="boxRadius"
+                  :disabled="boxType === 'null'"
+                />
+              </div>
+              <!-- 图标颜色设置：始终显示；非 AntD 图标时禁用 -->
+              <div class="flex items-center gap-3 w-full">
+                <label class="text-12px opacity-70 w-14 shrink-0">图标色</label>
+                <a-input
+                  v-model:value="iconColor"
+                  allow-clear
+                  :placeholder="boxType === 'null' ? '默认' : '#ffffff'"
+                  size="small"
+                  class="flex-1 min-w-0"
+                  :disabled="!isAntdIcon"
+                >
+                  <template #prefix>
+                    <div class="relative inline-flex items-center">
+                      <button
+                        type="button"
+                        :disabled="!isAntdIcon"
+                        class="w-4 h-4 rounded border border-gray-300 dark:border-gray-700"
+                        :class="!isAntdIcon ? 'opacity-50 cursor-not-allowed' : ''"
+                        :style="{ background: iconColor || '#ffffff' }"
+                        @click="openIconColorPicker"
+                      />
+                      <input
+                        ref="iconColorPickerRef"
+                        type="color"
+                        :value="iconColor || '#ffffff'"
+                        :disabled="!isAntdIcon"
+                        class="absolute left-0 top-0 opacity-0 pointer-events-none"
+                        style="width:16px;height:16px;"
+                        @input="iconColor = ($event.target as HTMLInputElement).value"
+                      >
+                    </div>
+                  </template>
+                </a-input>
+              </div>
+            </div>
+            <!-- 预览：固定底部 -->
+            <div class="w-full mt-auto">
+              <div class="py-4 rounded-md border-t border-t-dashed border-t-[#d0d7de] dark:border-t-[#30363d] flex flex-col items-center gap-2">
+                <template v-if="tempValueRef">
+                  <PubinfoIcon
+                    v-if="boxType === 'null'"
+                    :name="tempValueRef"
+                    :size="80"
+                    :color="(isAntdIcon && iconColor) ? iconColor : undefined"
+                  />
+                  <PubinfoIcon
+                    v-else
+                    :name="tempValueRef"
+                    :box="boxType"
+                    :size="80"
+                    :angle="boxAngle"
+                    :background="boxBackground"
+                    :radius="boxRadius"
+                    :color="isAntdIcon ? (iconColor || '#ffffff') : undefined"
+                  />
+                </template>
+              </div>
+            </div>
+          </div>
+          <!-- 侧栏底部操作按钮 -->
+          <div class="mt-4 flex justify-end gap-2">
+            <a-button @click="handleClose">
+              取消
+            </a-button>
+            <a-button type="primary" @click="handleConfirm">
+              确定
+            </a-button>
+          </div>
+        </div>
       </div>
     </a-modal>
   </a-form-item-rest>
 </template>
+
+<style scoped>
+/* Center radio group and prevent wrapper stretching */
+:deep(.ant-radio-group) {
+  display: inline-flex;
+  align-items: center;
+}
+:deep(.ant-radio-button-wrapper) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 10px;
+  height: auto !important;
+  line-height: 1 !important;
+  flex: 0 0 auto;
+}
+:deep(.ant-radio-button-wrapper > span) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/src/context.ts

@@ -1,20 +1,4 @@
 import type { InternalContext } from './interface';
 import { createContext } from 'pubinfo';
 
-// 持久化 rbac 模块上下文，避免 HMR 后丢失 request
-const g = globalThis as any;
-g.__PUBINFO__ = g.__PUBINFO__ || {};
-if (!g.__PUBINFO__.rbacCtx) {
-  g.__PUBINFO__.rbacCtx = createContext<InternalContext>();
-}
-export const ctx = g.__PUBINFO__.rbacCtx as ReturnType<typeof createContext<InternalContext>>;
-
-// HMR 恢复
-if (g.__PUBINFO__.rbacState) {
-  try {
-    ctx.set(g.__PUBINFO__.rbacState);
-  }
-  catch {
-    // ignore
-  }
-}
+export const ctx = createContext<InternalContext>('rbac');

package/src/index.ts

@@ -1,7 +1,6 @@
 import type { ModuleOptions } from 'pubinfo';
 import type { RbacOptions } from './interface';
-import { defineAsyncRoutes, defineIconModule, defineRouteModule } from 'pubinfo';
-import modules from 'virtual:pubinfo-resolver';
+import { defineAsyncRoutes } from 'pubinfo';
 import { useWebSocketManager } from '@/composables/useWebSocketManager';
 import { useViewStore } from '@/stores/view';
 import { ctx } from './context';
@@ -12,16 +11,10 @@ import 'uno.css';
 export function rbac(options: RbacOptions): ModuleOptions {
   const { pages, sort, id = 'RBAC', request } = options;
 
+  // ctx.set 会自动缓存以便 HMR 恢复
   ctx.set({ request });
-  // 缓存以便 HMR 恢复
-  (globalThis as any).__PUBINFO__.rbacState = { request };
 
-  defineIconModule(id, modules.icons);
-
-  if (pages === 'dynamic') {
-    defineRouteModule(id, modules.pages);
-  }
-  else {
+  if (pages !== 'dynamic') {
     // 兼容 1.x 版本的本地路由
     const asyncRoutes = filterPages({ pages, id });
     defineAsyncRoutes(asyncRoutes, { sort });

package/src/views/resource/components/ComponentSelect.vue

@@ -279,6 +279,12 @@ function onSelect(keys: (string | number)[], e: any) {
   border-radius: 6px !important;
 }
 
+.dark .directory-tree-root .ant-tree-treenode-selected::before {
+  /* Dark theme: use a deeper primary‑tinted background for selected row (previously #e6f4ff) */
+  background: #3166D4 !important; /* fallback solid */
+  border-radius: 6px !important;
+}
+
 .directory-tree-root .ant-tree-treenode:hover:before {
   border-radius: 6px !important;
 }
@@ -287,6 +293,10 @@ function onSelect(keys: (string | number)[], e: any) {
   color: #000 !important;
 }
 
+.dark .directory-tree-root .ant-tree-title{
+  color: #FFF !important;
+}
+
 .directory-tree-root .anticon-file{
   opacity: 0 !important;
 }

package/src/views/resource/components/DynamicRoutesForm.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Form } from '../interface';
-import ResourceIconesSelect from '@/components/ResourceIcones/Select.vue';
 import { RESOURCE_TYPE } from '../enum';
 import ComponentSelect from './ComponentSelect.vue';
 
@@ -29,7 +28,6 @@ const show = computed(() => {
     component: [RESOURCE_TYPE.MENU, RESOURCE_TYPE.NON_MENU].includes(type),
     iframe: [RESOURCE_TYPE.IFRAME].includes(type),
     link: [RESOURCE_TYPE.LINK].includes(type),
-    icon: [RESOURCE_TYPE.DYNAMIC_APP, RESOURCE_TYPE.MICRO_APP, RESOURCE_TYPE.INDEX, RESOURCE_TYPE.MENU, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(type),
     routeName: [RESOURCE_TYPE.MENU, RESOURCE_TYPE.NON_MENU, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(type),
     activeMenu: [RESOURCE_TYPE.MENU, RESOURCE_TYPE.NON_MENU, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(type),
   };
@@ -71,12 +69,6 @@ const isDynamicRoutesForm = computed(() => {
       </a-form-item>
     </a-col>
 
-    <a-col v-if="show.icon" :span="12">
-      <a-form-item label="资源图标" name="icon">
-        <ResourceIconesSelect v-model="form.icon" />
-      </a-form-item>
-    </a-col>
-
     <a-col v-if="show.routeName" :span="12">
       <a-form-item label="路由名称" :name="['meta', 'routeName']">
         <a-input v-model:value="form.meta!.routeName" placeholder="请输入路由名称（name）" :maxlength="256" />

package/src/views/resource/components/IconSelect.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { Form } from '../interface';
+import { PubinfoIcon } from 'pubinfo';
+import ResourceIconesSelect from '../../../components/ResourceIcones/Select.vue';
+import { RESOURCE_TYPE } from '../enum';
+
+defineOptions({
+  name: 'ResourceIconSelect',
+});
+
+const modelValue = defineModel<Form>({
+  default: {
+    meta: {
+      url: '',
+      component: '',
+    },
+  },
+});
+
+// 将外部存储扩展到 meta.iconOptions，避免破坏后端接口的 `icon: string` 结构
+const iconOptions = computed({
+  get() {
+    const meta = (modelValue.value.meta as any) || ((modelValue.value.meta as any) = {});
+    if (!meta.iconOptions) {
+      meta.iconOptions = {
+        boxType: 'null',
+        angle: 65,
+        background: { from: '#65E54A', to: '#35C724' },
+        radius: 6,
+        iconColor: '',
+      };
+    }
+    return meta.iconOptions;
+  },
+  set(val) {
+    const meta = (modelValue.value.meta as any) || ((modelValue.value.meta as any) = {});
+    meta.iconOptions = val || {
+      boxType: 'null',
+      angle: 65,
+      background: { from: '#65E54A', to: '#35C724' },
+      radius: 6,
+      iconColor: '',
+    };
+  },
+});
+
+const show = computed(() => {
+  const type = modelValue.value.type as RESOURCE_TYPE;
+
+  return {
+    icon: [RESOURCE_TYPE.DYNAMIC_APP, RESOURCE_TYPE.MICRO_APP, RESOURCE_TYPE.INDEX, RESOURCE_TYPE.MENU, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(type),
+  };
+});
+
+/** 是否展示微应用/动态应用的额外表单项 */
+const isDynamicRoutesForm = computed(() => {
+  return true;
+});
+
+/** 清除已选择的图标 */
+function clearIcon(e: MouseEvent) {
+  e.stopPropagation();
+  if (modelValue.value.icon) {
+    modelValue.value.icon = undefined; // 设为空串以触发 v-if 切换
+  }
+}
+</script>
+
+<template>
+  <div v-if="isDynamicRoutesForm && show.icon" class="w-full h-full flex justify-center  mb-4">
+    <ResourceIconesSelect
+      v-slot="{ open }"
+      v-model="modelValue.icon"
+      v-model:box-type="iconOptions.boxType"
+      v-model:angle="iconOptions.angle"
+      v-model:background="iconOptions.background"
+      v-model:radius="iconOptions.radius"
+      v-model:icon-color="iconOptions.iconColor"
+    >
+      <!-- select box -->
+      <template v-if="modelValue.icon">
+        <!-- 已选择图标展示盒子 -->
+        <div
+          class="size-20 flex justify-center items-center cursor-pointer
+          rounded-md border-px border-dashed relative group
+          border-[#d9d9d9] dark:border-[#424242]
+          hover:border-[#5794f7] dark:hover:border-[#5187e1]"
+          @click="open"
+        >
+          <PubinfoIcon
+            v-if="iconOptions.boxType && iconOptions.boxType !== 'null'"
+            :name="modelValue.icon"
+            :box="iconOptions.boxType"
+            :size="76"
+            :radius="iconOptions.radius"
+            :background="iconOptions.background"
+            :angle="iconOptions.angle"
+            :color="(modelValue.icon || '').startsWith('antd:') ? (iconOptions.iconColor || '#ffffff') : undefined"
+          />
+          <PubinfoIcon
+            v-else
+            :name="modelValue.icon"
+            size="76px"
+            :color="(modelValue.icon || '').startsWith('antd:') ? (iconOptions.iconColor || undefined) : undefined"
+          />
+          <!-- 清除按钮 -->
+          <button
+            v-if="modelValue.icon"
+            class="absolute -top-1.5 -right-1.5 size-5 flex items-center justify-center rounded-full
+            cursor-pointer border-none op-65 dark:op-55 hover:op-100"
+            type="button"
+            @click="clearIcon"
+          >
+            <PubinfoIcon name="antd:CloseOutlined" size="10px" />
+          </button>
+        </div>
+      </template>
+      <!-- null icon select box -->
+      <template v-else>
+        <div
+          class="size-20 flex justify-center items-center
+          rounded-md border-px border-dashed cursor-pointer
+          border-[#d9d9d9] dark:border-[#424242]
+          hover:border-[#5794f7] dark:hover:border-[#5187e1]
+          text-[#d9d9d9] dark:text-[#424242]
+          hover:text-[#5794f7] dark:hover:text-[#5187e1]
+          transition"
+          @click="open"
+        >
+          <div class="flex flex-col items-center justify-center">
+            <PubinfoIcon name="antd:PlusOutlined" />
+            <span class="text-10px mt-1">选择图标</span>
+          </div>
+        </div>
+      </template>
+    </ResourceIconesSelect>
+  </div>
+</template>

package/src/views/resource/components/ResourceEdit.vue

@@ -11,6 +11,7 @@ import { ACTION, RESOURCE_COLOR, RESOURCE_TYPE, resourceOptions } from '../enum'
 import { useMetaForm } from '../hooks/useMetaForm';
 import { defaultMeta } from '../model';
 import DynamicRoutesForm from './DynamicRoutesForm.vue';
+import ResourceIconSelect from './IconSelect.vue';
 import MetaForm from './MetaForm.vue';
 
 defineOptions({
@@ -202,38 +203,43 @@ defineExpose({
         :label-col="{ style: { width: '100px' } }"
       >
         <a-row :gutter="8">
-          <a-col v-if="parentNode?.name" :span="24">
-            <a-form-item name="parentId">
-              <template #label>
-                <DatabaseOutlined class="mr-1" />
-                父资源
-              </template>
-              {{ parentNode?.name }}
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="资源类型" name="type">
-              <div
-                v-if="state.title === ACTION.EDIT"
-                class="flex items-center space-x-1"
-              >
-                <!-- <PubinfoIcon v-if="form.type" :name="`resource-${RESOURCE_ICON[Number(form.type)]}`" class="text-xl" />
+          <a-col :span="12">
+            <a-col v-if="parentNode?.name" :span="24">
+              <a-form-item name="parentId">
+                <template #label>
+                  <DatabaseOutlined class="mr-1" />
+                  父资源
+                </template>
+                {{ parentNode?.name }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="资源类型" name="type">
+                <div
+                  v-if="state.title === ACTION.EDIT"
+                  class="flex items-center space-x-1"
+                >
+                  <!-- <PubinfoIcon v-if="form.type" :name="`resource-${RESOURCE_ICON[Number(form.type)]}`" class="text-xl" />
                 <span>
                   {{ resourceComputedOptions.find(e => e.value === form.type)?.label }}
                 </span> -->
 
-                <a-tag v-if="form.type" :color="RESOURCE_COLOR[Number(form.type)]" :bordered="false">
-                  {{ resourceComputedOptions.find(e => e.value === form.type)?.label }}
-                </a-tag>
-              </div>
-              <a-radio-group
-                v-else
-                v-model:value="form.type"
-                :options="resourceComputedOptions"
-                option-type="button"
-                button-style="solid"
-              />
-            </a-form-item>
+                  <a-tag v-if="form.type" :color="RESOURCE_COLOR[Number(form.type)]" :bordered="false">
+                    {{ resourceComputedOptions.find(e => e.value === form.type)?.label }}
+                  </a-tag>
+                </div>
+                <a-radio-group
+                  v-else
+                  v-model:value="form.type"
+                  :options="resourceComputedOptions"
+                  option-type="button"
+                  button-style="solid"
+                />
+              </a-form-item>
+            </a-col>
+          </a-col>
+          <a-col :span="12">
+            <ResourceIconSelect v-model="form" />
           </a-col>
         </a-row>
         <a-row :gutter="8">

package/src/views/toolbar_setting/animationData.ts

@@ -1,6 +1,5 @@
 import darkEnableColorSchemeData from '@/assets/lottie/toolbar/dark/enableColorScheme.json?url';
 import darkEnableFullscreenData from '@/assets/lottie/toolbar/dark/enableFullscreen.json?url';
-import darkEnableI18nData from '@/assets/lottie/toolbar/dark/enableI18n.json?url';
 import darkEnableNotificationData from '@/assets/lottie/toolbar/dark/enableNotification.json?url';
 import darkEnablePageReloadData from '@/assets/lottie/toolbar/dark/enablePageReload.json?url';
 import darkEnableUserPreferencesData from '@/assets/lottie/toolbar/dark/enableUserPreferences.json?url';
@@ -11,7 +10,6 @@ import darkNavSearchEnableHotkeysData from '@/assets/lottie/toolbar/dark/navSear
 import lightEnableColorSchemeData from '@/assets/lottie/toolbar/light/enableColorScheme.json?url';
 import lightEnableFullscreenData from '@/assets/lottie/toolbar/light/enableFullscreen.json?url';
 
-import lightEnableI18nData from '@/assets/lottie/toolbar/light/enableI18n.json?url';
 import lightEnableNotificationData from '@/assets/lottie/toolbar/light/enableNotification.json?url';
 
 import lightEnablePageReloadData from '@/assets/lottie/toolbar/light/enablePageReload.json?url';
@@ -23,7 +21,6 @@ import lightNavSearchEnableHotkeysData from '@/assets/lottie/toolbar/light/navSe
 export {
   darkEnableColorSchemeData,
   darkEnableFullscreenData,
-  darkEnableI18nData,
   darkEnableNotificationData,
   darkEnablePageReloadData,
   darkEnableUserPreferencesData,
@@ -32,7 +29,6 @@ export {
   darkNavSearchEnableHotkeysData,
   lightEnableColorSchemeData,
   lightEnableFullscreenData,
-  lightEnableI18nData,
   lightEnableNotificationData,
 
   lightEnablePageReloadData,