xx

src/pages/colorCard/ColorPalette.vue

@@ -1,27 +1,29 @@
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
+import ColorPaletteComponent from './ColorPalette.vue';
 
-export default defineComponent({
+const props = defineProps({
-  name: 'ColorPalette',
+  palette: {
-  props: {
+    type: Object as PropType<Record<string, any>>,
-    palette: {
+    required: true,
-      type: Object as PropType<Record<string, any>>,
-      required: true,
-    },
   },
 });
+
+defineComponent({
+  name: 'ColorPalette',
+});
 </script>
 
 <template>
   <div
-    v-for="(value, keyName) in palette" :key="keyName" class="flex flex-col"
+    v-for="(value, keyName) in props.palette" :key="keyName" class="flex flex-col"
   >
     <h2 v-if="typeof value === 'object'">
       {{ keyName }}
     </h2>
     <div v-if="typeof value === 'object'" class="flex haha flex-1">
-      <ColorPalette :palette="value" />
+      <ColorPaletteComponent :palette="value" />
     </div>
     <div
       v-else

src/pages/login/index.vue

@@ -39,6 +39,13 @@ async function submit(e: any) {
     }
   }, 1500);
 }
+
+// fnc : 跳转到色卡页面
+function toColorCard() {
+  router.push({
+    name: 'ColorCard',
+  });
+}
 </script>
 
 <template>
@@ -59,6 +66,10 @@ async function submit(e: any) {
         <button form-type="submit" class="submit-btn" hover-class="none">
           登录
         </button>
+
+        <button @click="toColorCard">
+          色卡
+        </button>
       </form>
     </view>
   </view>

src/types/import-components.d.ts

@@ -9,7 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     AppProvider: typeof import('./../components/AppProvider/index.vue')['default']
     BasicButton: typeof import('./../components/BasicButton/index.vue')['default']
-    'svg-icon': typeof import('./../components/SvgIcon/index.vue')['default']
     SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
   }
 }

unocss.config.ts

@@ -1,75 +1,78 @@
-/**
- * unocss defineConfig
- * @link unocss: https://github.com/unocss/unocss
- * @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
- */
 
-import { defineConfig, presetIcons } from 'unocss';
+  
-import presetWeapp from 'unocss-preset-weapp';
+  /**
-import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
+   * unocss defineConfig
-import transformerDirectives from '@unocss/transformer-directives';
+   * @link unocss: https://github.com/unocss/unocss
-
+   * @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
-const transformRules = {
+   * */
-  '.': '-d111-',
+  
-  '/': '-s111-',
+  import { defineConfig, presetIcons } from 'unocss';
-  ':': '-c111-',
+  import presetWeapp from 'unocss-preset-weapp';
-  '%': '-p111-',
+  import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
-  '!': '-e111-',
+  import transformerDirectives from '@unocss/transformer-directives';
-  '#': '-w111-',
+  
-  '(': '-b111l-',
+    const transformRules = {
-  ')': '-b111r-',
+        '.': '-d111-',
-  '[': '-f111l-',
+        '/': '-s111-',
-  ']': '-f111r-',
+        ':': '-c111-',
-  '$': '-r111-',
+        '%': '-p111-',
-  ',': '-r222-',
+        '!': '-e111-',
-};
+        '#': '-w111-',
-
+        '(': '-b111l-',
-const prefix = '';
+        ')': '-b111r-',
-
+        '[': '-f111l-',
-export default defineConfig({
+        ']': '-f111r-',
-  presets: [
+        $: '-r111-',
-    // https://github.com/MellowCo/unocss-preset-weapp
+        ',': '-r222-',
-    presetWeapp({
+    };
-      nonValuedAttribute: true,
+    
-      prefix,
+    const prefix = '';
-      whRpx: true,
+    
-      transform: true,
+    export default defineConfig({
-      platform: 'uniapp',
+        presets: [
-      transformRules,
+            // https://github.com/MellowCo/unocss-preset-weapp
-    }),
+            presetWeapp({
-    // 由 Iconify 提供支持的纯 CSS 图标解决方案
+                nonValuedAttribute: true,
-    presetIcons({
+                prefix: prefix,
-      scale: 1,
+                whRpx: true,
-      warn: true,
+                transform: true,
-      extraProperties: {
+                platform: 'uniapp',
-        'display': 'inline-block',
+                transformRules,
-        'vertical-align': 'middle',
+            }),
-      },
+            // 由 Iconify 提供支持的纯 CSS 图标解决方案
-    }),
+            presetIcons({
-  ],
+                scale: 1,
-  // transformers: [transformerDirectives()],
+                warn: true,
-  // attributify: false,
+                extraProperties: {
-  shortcuts: [
+                    'display': 'inline-block',
-    {
+                    'vertical-align': 'middle',
-      'border-base': 'border border-gray-500_10',
+                },
-      'z-tar-both': 'z-988',
+            }),
-      'head-fixed': 'fixed top-0 left-0 w-full z-tar-both',
+        ],
-      'center': 'flex justify-center items-center',
+        // transformers: [transformerDirectives()],
-    },
+        // attributify: false,
-  ],
+        shortcuts: [
-  theme: { extend: { opacity: { disabled: 'var(--opacity-disabled)' } }, colors: { primary: 'var(--colors-primary)', secondary: 'var(--colors-secondary)', accent: 'var(--colors-accent)', success: 'var(--colors-success)', warning: 'var(--colors-warning)', error: 'var(--colors-error)', disable: 'var(--colors-disable)', danger: 'var(--colors-danger)', mark: 'var(--colors-mark)', title: 'var(--colors-title)', subtitle: 'var(--colors-subtitle)', paragraph: 'var(--colors-paragraph)', fontColorblack: 'var(--colors-fontColorblack)', fontColorPrimary: 'var(--colors-fontColorPrimary)', fontColorInverse: 'var(--colors-fontColorInverse)', fontColorGrey: 'var(--colors-fontColorGrey)', fontColorPlaceholder: 'var(--colors-fontColorPlaceholder)', fontColorDisable: 'var(--colors-fontColorDisable)', fontColorBottomText: 'var(--colors-fontColorBottomText)', container: 'var(--colors-container)', page: 'var(--colors-page)', containerInverse: 'var(--colors-containerInverse)', containerHover: 'var(--colors-containerHover)', secondaryHover: 'var(--colors-secondaryHover)', containerMask: 'var(--colors-containerMask)', iconButton: 'var(--colors-iconButton)', borderColor: 'var(--colors-borderColor)' }, fontSize: { sm: 'var(--fontSize-sm)', base: 'var(--fontSize-base)', lg: 'var(--fontSize-lg)', title: 'var(--fontSize-title)', subtitle: 'var(--fontSize-subtitle)', paragraph: 'var(--fontSize-paragraph)' }, borderRadius: { sm: 'var(--borderRadius-sm)', base: 'var(--borderRadius-base)', lg: 'var(--borderRadius-lg)', circle: 'var(--borderRadius-circle)' }, spacing: { rowSm: 'var(--spacing-rowSm)', rowBase: 'var(--spacing-rowBase)', rowLg: 'var(--spacing-rowLg)', colSm: 'var(--spacing-colSm)', colBase: 'var(--spacing-colBase)', colLg: 'var(--spacing-colLg)' } },
+            {
-  transformers: [
+                'border-base': 'border border-gray-500_10',
-    transformerDirectives({
+                'z-tar-both': 'z-988',
-      applyVariable: ['--at-apply', '--uno-apply', '--uno'],
+                'head-fixed': 'fixed top-0 left-0 w-full z-tar-both',
-      enforce: 'pre',
+                center: 'flex justify-center items-center',
-    }),
+            },
-    transformerAttributify({
+        ],
-      classPrefix: prefix,
+        theme: {"extend":{"opacity":{"disabled":"var(--opacity-disabled)"}},"colors":{"primary":"var(--colors-primary)","secondary":"var(--colors-secondary)","accent":"var(--colors-accent)","success":"var(--colors-success)","warning":"var(--colors-warning)","error":"var(--colors-error)","disable":"var(--colors-disable)","danger":"var(--colors-danger)","mark":"var(--colors-mark)","title":"var(--colors-title)","subtitle":"var(--colors-subtitle)","paragraph":"var(--colors-paragraph)","fontColorblack":"var(--colors-fontColorblack)","fontColorPrimary":"var(--colors-fontColorPrimary)","fontColorInverse":"var(--colors-fontColorInverse)","fontColorGrey":"var(--colors-fontColorGrey)","fontColorPlaceholder":"var(--colors-fontColorPlaceholder)","fontColorDisable":"var(--colors-fontColorDisable)","fontColorBottomText":"var(--colors-fontColorBottomText)","container":"var(--colors-container)","page":"var(--colors-page)","containerInverse":"var(--colors-containerInverse)","containerHover":"var(--colors-containerHover)","secondaryHover":"var(--colors-secondaryHover)","containerMask":"var(--colors-containerMask)","iconButton":"var(--colors-iconButton)","borderColor":"var(--colors-borderColor)"},"fontSize":{"sm":"var(--fontSize-sm)","base":"var(--fontSize-base)","lg":"var(--fontSize-lg)","title":"var(--fontSize-title)","subtitle":"var(--fontSize-subtitle)","paragraph":"var(--fontSize-paragraph)"},"borderRadius":{"sm":"var(--borderRadius-sm)","base":"var(--borderRadius-base)","lg":"var(--borderRadius-lg)","circle":"var(--borderRadius-circle)"},"spacing":{"rowSm":"var(--spacing-rowSm)","rowBase":"var(--spacing-rowBase)","rowLg":"var(--spacing-rowLg)","colSm":"var(--spacing-colSm)","colBase":"var(--spacing-colBase)","colLg":"var(--spacing-colLg)"}},
-      transformRules,
+        transformers: [
-      nonValuedAttribute: true,
+            transformerDirectives({
-    }),
+                applyVariable: ['--at-apply', '--uno-apply', '--uno'],
-    transformerClass({
+                enforce: 'pre'
-      transformRules,
+            }),
-    }),
+            transformerAttributify({
-  ],
+                classPrefix: prefix,
-});
+                transformRules,
+                nonValuedAttribute: true,
+            }),
+            transformerClass({
+                transformRules,
+            }),
+        ],
+    });
+