whistle.mock-plugins 1.0.0

package/ui/src/styles/welcome.css

@@ -0,0 +1,282 @@
+.welcome-container {
+  height: 100%;
+  padding: 0 0 20px 0;
+  overflow-y: auto;
+}
+
+.welcome-header {
+  margin-bottom: 24px;
+}
+
+.welcome-header h1 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #262626;
+  margin: 0 0 8px 0;
+}
+
+.welcome-header p {
+  font-size: 16px;
+  color: #595959;
+  margin: 0;
+}
+
+.cards-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.card {
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.card-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: #e6f7ff;
+  color: #1890ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  margin-right: 12px;
+}
+
+.stats-card .card-icon {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.quickstart-card .card-icon {
+  background-color: #f6ffed;
+  color: #52c41a;
+}
+
+.usage-card .card-icon {
+  background-color: #f0f5ff;
+  color: #597ef7;
+}
+
+.card-header h2 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #262626;
+  margin: 0;
+}
+
+.card-content {
+  padding: 16px;
+  flex: 1;
+}
+
+/* 统计卡片样式 */
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.stats-card .card-content {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #8c8c8c;
+}
+
+/* 快速开始卡片样式 */
+.steps {
+  margin-bottom: 20px;
+}
+
+.step {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.step:last-child {
+  margin-bottom: 0;
+}
+
+.step-number {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #1890ff;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-title {
+  font-weight: 500;
+  color: #262626;
+  margin-bottom: 4px;
+}
+
+.step-desc {
+  font-size: 14px;
+  color: #595959;
+}
+
+.quickstart-actions {
+  margin-top: auto;
+  text-align: center;
+}
+
+.quickstart-button {
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0 16px;
+  height: 32px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.quickstart-button:hover {
+  background-color: #40a9ff;
+}
+
+/* 使用说明卡片样式 */
+.usage-item {
+  margin-bottom: 16px;
+}
+
+.usage-item:last-child {
+  margin-bottom: 0;
+}
+
+.usage-title {
+  font-weight: 500;
+  color: #262626;
+  margin-bottom: 8px;
+}
+
+.usage-desc {
+  font-size: 14px;
+  color: #595959;
+}
+
+.code-block {
+  background-color: #f5f5f5;
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin: 8px 0;
+  font-family: monospace;
+  overflow-x: auto;
+}
+
+.usage-list {
+  margin: 8px 0;
+  padding-left: 20px;
+}
+
+.usage-list li {
+  margin-bottom: 4px;
+}
+
+.usage-list code {
+  background-color: #f5f5f5;
+  padding: 2px 4px;
+  border-radius: 2px;
+  font-family: monospace;
+}
+
+/* 最近活动样式 */
+.recent-activities {
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.section-header {
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.section-header h2 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #262626;
+  margin: 0;
+}
+
+.activities-list {
+  padding: 0 16px;
+}
+
+.activity-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.activity-item:last-child {
+  border-bottom: none;
+}
+
+.activity-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.activity-content {
+  flex: 1;
+}
+
+.activity-title {
+  font-size: 14px;
+  color: #262626;
+  margin-bottom: 4px;
+}
+
+.activity-time {
+  font-size: 12px;
+  color: #8c8c8c;
+} 

package/webpack.config.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  entry: './ui/src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'app/public'),
+    filename: 'js/index.js',
+    publicPath: '/'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './ui/src/index.html',
+      filename: 'index.html'
+    })
+  ],
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'app/public')
+    },
+    port: 8080,
+    hot: true,
+    proxy: {
+      '/api': 'http://localhost:8899'
+    }
+  }
+};