From 6b28b6f4e0c7002ca9abd38a0a03544563767f17 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Tue, 24 Oct 2023 02:11:54 -0700
Subject: [PATCH] feat(playground):  optimize the playground UI style

---
 examples/sites/playground/App.vue | 23 ++---------------------
 1 file changed, 2 insertions(+), 21 deletions(-)

diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index d38afaf9b1..385efa4bb5 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -9,8 +9,6 @@ import { staticDemoPath, getWebdocPath } from '@/views/components/cmpConfig'
 import { fetchDemosFile } from '@/tools/utils'
 import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
-import Sun from './icons/Sun.vue'
-import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 
 const versions = ['3.11', '3.10', '3.9', '3.8']
@@ -67,13 +65,6 @@ const store = new useStore({
   }
 })
 
-// 切换主题
-const dark = ref(false)
-
-const toggleTheme = (theme) => {
-  dark.value = theme
-}
-
 const state = reactive({
   // repl 属性
   layout: 'horizon',
@@ -194,20 +185,13 @@ function share() {
         <tiny-button-group :data="state.layoutOptions" v-model="state.layout"></tiny-button-group>
       </span>
       <span class="ml20">
-        版本:
+        OpenTiny Vue 版本:
         <tiny-select v-model="state.selectVersion" @change="versionChange" style="width: 150px">
-          <tiny-option
-            v-for="item in state.versions"
-            :key="item.value"
-            :label="'opentiny/vue@' + item.value"
-            :value="item.value"
-          >
+          <tiny-option v-for="item in state.versions" :key="item.value" :label="item.value" :value="item.value">
           </tiny-option>
         </tiny-select>
       </span>
       <Share @click="share" title="分享" class="share" />
-      <Sun v-if="!dark" @click="toggleTheme(true)" class="light" />
-      <Moon v-else @click="toggleTheme(false)" class="dark" />
       <a style="display: flex" href="https://github.com/opentiny/tiny-vue" target="_blank">
         <GitHub class="github" />
       </a>
@@ -216,7 +200,6 @@ function share() {
   <Repl
     :editor="Editor"
     :store="store"
-    :theme="dark ? 'dark' : 'light'"
     :preview-options="state.previewOptions"
     :clear-console="false"
     :layout="state.layout"
@@ -265,8 +248,6 @@ function share() {
   height: calc(100vh - 36px - 16px) !important;
 }
 
-.light,
-.dark,
 .github,
 .share {
   width: 20px;